DEV Community: Sebby235

Beginning Coder Challenges

Sebby235 — Tue, 08 Aug 2023 13:57:06 +0000

When I first started coding I thought there was no way I could learn how to code. I thought that this wasn't the right path for me, I thought that it was too hard, I simply just thought that I couldn't do it. Fast forward six months later and I'm creating full stack applications by myself. So I figured I would write a blog on some challenges that beginners face and how to overcome them.

First and foremost you will experience the imposter syndrome. I really think that is the hardest to get rid of. I still have imposter syndrome to this day. I have talked to my coder friends who have amazing jobs and they still have imposter syndrome. One thing my friend said to me to really help me get over it is the fact that once you started you're meant to be there. At the beginning you will really have imposter syndrome and it takes some time to settle down but it will eventually. Just make sure you show up and code a little bit everyday. Be patient with yourself. You are learning a whole new language this is not an easy skill. Coding is essentially like any other skill. Once you put the reps in the easier it comes. So just make sure to code a little bit every day.

Make sure you really understand what you're doing and why. When I first started coding I really didn't understand what I was coding or even why I was. Really make sure you take the time to understand the functionality of what you're doing and why you are doing it. This will really help solidify concepts in your brain and just make the learning process overall easier. Also note that coding is ongoing. You are always going to be learning. This isn't a once you know it you know everything. I realized that this is a skill that you will be learning for years upon years. I used to get so overwhelmed by all of the information coming at me at once and I was trying to learn it all so fast. Just take your time and know that this is a process. You will fall get demotivated but you just have to get back up.

Another challenge is understanding that you don't know what you don't know at the beginning. Let me explain. To clarify, you simply won't understand topics or functionality at the beginning and then you won't know what the topics or functionality are. You feel simply lost floating in space. Just know that with time and practice things will start to click. Coding is definitely a hands on learning experience. Of course you can read and watch all the videos in the world about coding but the best way to learn is to simply start coding. At the beginning I was reading and watching so many videos but when it came time for me to do the coding I was lost. The best way to learn in my opinion is to actually get on the keyboard and start writing some code.

Learning to code is definitely not for the week. There is a lot of trial and error involved. You will get upset and want to quit sometimes or just think its not for you but that's not the case, just make sure you stay with it. Once you're writing full stack applications you will be happy that you didn't quit. Just make sure to get your reps in and stick with it.

The Power Of List Comprehension

Sebby235 — Tue, 25 Jul 2023 14:22:46 +0000

Python one of the most used coding languages has some very powerful features that it can offer. One feature that helps developers is List Comprehension. List comprehension is a clean and concise way to create lists in Python. But, what exactly is list comprehension. To sum it up, list comprehension is a compact syntax for creating lists. You can create these lists based on sequences, existing lists, or really anything iterable in Python. This will often replace the need for 'for' loops. Lets jump into the syntax and how to use list comprehension.

The basic syntax for a list comprehension is:

new_list = [expression for item in iterable if condition]

expression: is the operation one wants to perform on each item in the iterable.
item: is the variable that takes each value from the iterable one by one.
condition: is an optional part of the list comprehension. This filters items that meet a specific condition.

Lets look at some simple examples to get started.

Example 1: Filtering Odd Numbers
Say there is a list of numbers, one wants to create a new list that only contains the odd numbers. Here is the tradition 'for' loop:

numbers = [1, 2, 3, 4, 5]
odd_numbers = []

for num in numbers:
    if num % 2 != 0:
        odd_numbers.append(num)
print (odd_numbers)
#Output: [1, 3, 5]

Now with list comprehension:

numbers = [1, 2, 3, 4, 5]
odd_numbers = [num for num in numbers if num % 2 != 0]
print(odd_numbers)
#Output: [1, 3, 5]

Example 2: Squaring Numbers
Consider a list of numbers, one wants to create a new list that has all of the squares of the original numbers. Again one could use a 'for' loop:

numbers = [1, 2, 3, 4, 5]
squared_numbers = []
for num in numbers:
    squared_numbers.append(num ** 2)
print(squared_numbers)
#Output: [1, 4, 9, 16, 25]

Now with list comprehension:

numbers = [1, 2, 3, 4, 5]
squared_numbers = [num ** 2 for num in numbers]
print(squared_numbers)
#Output: [1, 4, 9, 16, 25]

List Comprehension with Conditional Expressions
Python list comprehensions can also have conditional expressions, which makes them a lot more versatile. Here is the syntax for conditional expression:

value_if_true if condition else value_if_false

Example 3: Mapping Odd and Even
Say one wants to create a lists that maps odd numbers to the string 'odd' and even numbers to the string 'even':

numbers = [1, 2, 3, 4, 5]
mapped_numbers = ['odd' if num % 2 != 0 else 'even' for num in numbers]
print(mapped_numbers)
#Output: ['odd', 'even', 'odd', 'even', 'odd']

Nested List Comprehension
List comprehensions can even be nested! This allows you to make more complex structures, such as 2D lists:

Example 4: Creating a 3X3 Identity Matrix

identity_matrix = [[1 if row == col else 0 for col in range(3)] for row in range(3)]
print(identity_matrix)
#Output: [[1, 0, 0], [0, 1, 0] [0, 0, 1]]

Python list comprehension is a very powerful and efficient tool that really simplifies list creation and manipulation. By using list comprehension one can write more expressive and efficient code. Those who embrace list comprehension find that their code becomes more readable and concise than ever before.

Incorporating AI Into Your React App

Sebby235 — Wed, 05 Jul 2023 13:45:15 +0000

If you are a programmer you definitely know about React. You most likely know how to use React to create a web application. There are endless things you can create with React. Well with this new day and age we have a new friend called AI (Artificial Intelligence). Now what if we created a React application and then incorporated AI into it. Today this blog will be covering how to do so.

First things first it is not as difficult as one would expect. Today we will be using Alan AI to help us create a React app with AI. This will be a simple voice enabled React app. Users will be able to click the voice assistant button and give commands and in return Alan AI will reply to them.

Step 1. Go to Alan AI Studio (https://alan.app/). Then sign up and in Alan AI create a project.

Step 2. Now it is time to create a simple React app.

Go to the folder where you would like to create the app.
npx create-react-app my-app
Switch to that folder
cd my-app

3.Now just start it up
npm start

Step 3. Install the Alan AI Web component. Luckily with this day and age we don't have to create an AI from scratch.
npm i @alan-ai/alan-sdk-web

Step 4. Its time to add the Alan AI button to the app

1.Open your App.js file

2.Import the Alan AI Web component
import alanBtn from "@alan-ai/alan-sdk-web";

3.Use the Effect Hook to add the Alan AI button.
import React, { useEffect } from 'react';

4.Now call useEffect

function App() {
    // Adding the Alan AI button
    useEffect(() => {
        alanBtn({
            key: 'YOUR_KEY_FROM_ALAN_STUDIO_HERE',
            onCommand: (commandData) => {
                if (commandData.command === 'go:back') {
                    // Call the client code that will react to the received command
                }
            }
        });
    }, []);
}

You need to replace YOUR_KEY_FROM_ALAN_STUDIO_HERE with the special Alan AI SDK key. In Alan AI studio at the top of the code editor click Integrations, then copy the value provided in the Alan SDK key field then paste the value to "key" in the code.

Step 5. Finally its time to add voice commands.

intent(`What is your name?`, p => {
    p.play(`It's Alan, and yours?`);
});

intent(`How are you doing?`, p => {
    p.play(`Good, thank you. What about you?`);
});

Now in your react app you will be able to ask "What is your name?" and "How are you doing?"

See since we have helpful libraries and frameworks it is not too complicated to incorporate AI into your react app. This is just one framework. Here are a couple more frameworks and libraries so you can go and create an AI react app on your own. TensorFlow.js, Brain.js, OpenCV.js, IBM Watson Developer Cloud, ML5.js, Microsoft Cognitive Services. In this blog we went over a very basic way to incorporate AI. It gets much more difficult with a combination of backend and frontend development. This is just an easy fun way to get your feet wet.

I have always found AI very interesting, the fact that it is now possible to create an AI React app to amazing. As I mentioned before this is a very elementary way to incorporate AI although it is very neat. As a developer that is still in school I love coming across new challenges and obstacles. With this new information I learned I thought what better way to share it than with a blog. Now go and create an AI React app!!!

Resources- (https://alan.app/)

Differences between .forEach() and .map()

Sebby235 — Mon, 26 Jun 2023 03:46:48 +0000

When a programmer is working with arrays in JavaScript there are two commonly used array methods, ".forEach()" and ".map()". At first glance they may seem pretty similar but there are a few key differences between them. These differences can greatly impact how one would transform and manipulate arrays. This post will be going over the differences between the two and understanding when you would use each method.

The purpose and functionality are the main differences. ".forEach()" is an array method that will iterate over each element in an array and then will perform a specified action on each element in the array. ".forEach()" will not return a new array and it is primarily used for executing side effects/operations that don't require a transformed array. ".map()" also iterates over each element in an array. The reason it differs from ".forEach()" is because it returns a new array with the exact length as the original array. ".map()" is most commonly used for transforming or mapping elements from one array to another array.

The return values also differentiate ".map()" and ".forEach()". With return values ".forEach()" does not return anything, all it does is simply execute the provided callback function for each element in the array. ".map()" actually will return a new array. It will allow one to create a new array based on the transformation logic defined in within the callback function.

Another difference is how each method will handle side effects and the purpose they serve. ".forEach()" is good to use when one wants to perform an action on each element of an array without creating a whole new array. One example would be using ".forEach()" to log each element to the console. ".map()" is useful when one would want to create a new array with modified changes. This allows you to perform transformations on each element and then collect the results in a new array.

The mutability of the original array is also another difference. ".forEach()" does not modify the original array. It only operates on the elements in the array and it does not change their order or values. ".map()" will return a new array but leave the original array unchanged. This ensures that the original array remains the same while the new array will be transformed.

In conclusion the main differences between ".forEach()" and ".map()" are their pruposes, return values, how they handle side effects, and the impact on the original array. ".forEach()" is mainly used for executing operations on elements in an array without returning a new array. ".map()" is mainly used when transforming or mapping elements from one array to another by creating a whole new array. Understanding the differences will help one make informed decisions when working with arrays. Remember to use ".forEach()" for operations and side effects without returning a new array. Make sure to use ".map()" to create a whole new array which has transformed values from the original array.

Difference between innerText and textContent ?

Sebby235 — Mon, 12 Jun 2023 04:38:30 +0000

When working with the text content of HTML elements in JavaScript, programmers commonly utilize two properties: "textContent" and "innerText". While these properties may initially appear similar and interchangeable, they possess distinct differences. In this post, we will explore the major disparities between "textContent" and "innerText" and gain insights into their appropriate usage.

Firstly, let's consider the handling of hidden elements. The "textContent" property retrieves the text content of all elements regardless of their visibility. However, the "innerText" property takes CSS styling into account. It excludes hidden elements that employ properties like "display: none;" or "visibility: hidden;", ensuring that only text visible to the user is returned.

Secondly, there is a significant dissimilarity in how these properties handle CSS styles and layout information. "textContent" disregards CSS styling and layout properties, providing access to the raw text content, including text within hidden elements. On the other hand, "innerText" considers rendering and visibility based on CSS styles. It solely returns text content that is visually rendered to the user. This aspect makes "innerText" useful when dealing with text affected by CSS styles and layout.

Performance-wise, "textContent" generally outperforms "innerText". As "textContent" does not account for CSS styles or layout, it offers faster access to the text content of elements. Therefore, it is the preferred choice when only the raw text content is required, without considering visibility or styling.

Considering browser compatibility, "textContent" is widely supported across all modern browsers, including older versions. In contrast, innerText may not be supported by certain older browsers. Thus, if broader compatibility is needed, it is recommended to use "textContent".

In conclusion, the differences between "innerText" and "textContent" primarily lie in their handling of hidden elements, CSS styling, performance, and browser compatibility. "textContent" provides raw text content for all elements, irrespective of visibility or styling, while "innerText" considers CSS styles and returns only visibly rendered text. By understanding these distinctions, you can make informed decisions and ensure the appropriate handling of text content in JavaScript.