teleren/devto huggingface dataset:
The Road to Frontend Developer Day 1
Tags: javascript, react, beginners, career
Published: 2022-09-06 19:34:52

Howdy beautiful creatures!

The purpose of starting this "Road to Frontend Developer" is to keep myself motivated, learn, and improve my technical skills. Also, I would love to share some of my struggles, new findings, or any tips and tricks that helped me be better developer to people who are on the same journey as I am.

Please allow me to explain a little bit about myself. My name is Masaki Hook, currently working as recreational coordinator at Walt Disney World Resort (Yacht and Beach/Boardwalk region). I have a bachelor's of Computer Science degree from University of Central Florida. For the past 6 months, I have been self studying Front-end/Web development skills such as HTML, CSS, JavaScript, React, Tailwind/Bootstrap, SASS, and Git to comfortably say I am proficient in these tech stacks. Currently studying on gaining more knowledge on Back-end Skills such as GraphQL, MongoDB, Node.js/Express.js to name few. And yes you guessed it! I am Japanese and I do love anime but please be warned, I do have to watch anime in Japanese, no English dub, or you are not true anime lover... Just kidding! XD 

I am currently in the job hunting for entry level job, but haven't had any luck getting into the interview for almost 2 months now. I am currently struggling to figure out what to learn or need to do. However, I am not stopping to improve myself. I have been in so called tutorial hell if I am being honest :D and thought myself, there are people out there who is struggling as I am or worse, so why don't I make a blog posts about my journey to become a front-end developer? And have others join or see me learn and sharpen the skills together? I am hoping for others who are on the same boat as me to join and learn together! I will mainly focusing on React/JavaScript skills to improve at this point but I also need to brush up some of HTML/CSS or other frameworks such as Bootstrap or Tailwind CSS, and learn more back-end tech stacks.

If you are a very well experienced developer and who has time and have been through the struggles and willing to share some of your tips and tricks, or simply wouldn't mind spending some of your precious time helping your fellow newbie developer, please feel free to comment and gives us a hand whenever you can, and I really do appreciate putting your time and effort to help!

Here is my discord server: https://discord.gg/6yZHJSh
You can join the discord server and have chat! I also play video games a lot, and maybe I can stream my learning or making tutorial video for some topics that I am very comfortable teaching, but please be aware I am no expert on any topics, I just do know certain topics very well!

Tomorrow, I am going to write actual technical side of the post so stay tuned! This is the beginning of my journey!

Thank you very much for reading this posts, and I hope all of you have a magical day!

Happy Coding,

Masaki Hook
After a few months...
Published: 2022-09-06 18:07:28

It's been a few months since I started learning coding. As a person under liberal arts education, learning coding used to be considered a way of committing suicide of our brains. Fortunately, by the time of the development of programming, we have some programming languages that fit people like me now.

As I mentioned in [About me](https://dev.to/isaac_aloha/about-me-44om), Python is the first programming language I learned. After a few years, it helps me a lot when I learn JavaScript. However, I make mistakes often because of the syntax difference between them. And still, I have a long way to go in the algorithm.

If you need me to make it short, I would say Java is my nightmare. Many concepts of it are very tough for understanding to me. I guess that's why programming is considered a skill for people good at math. In addition, everything has to be declared. It's like you're talking to an idiot. For example, you must tell it "1" is not only a number but what kind of number it is. But on the other hand, I like its strict part. It makes the code clearer if you're willing to dive into it. You need to have extraordinary patience and wisdom when you talk to idiots everyday. That's probably the reason why Java developers deserve higher payback.

HTML and CSS are very different from the above. For example, the count starts from 1 instead of 0. Although it takes a while to get used to it, I find the core part is the structure. In my native language, the term "programming" usually comes with "design". Both of them are relatively loose languages, so it's crucial to have a good code structure from the very beginning.

Learning coding is not as tough as I thought so far. There are still a lot of things that make me feel frustrated sometimes though, it also has its interesting part. Whenever I lose my way, I always try to recall the reason why I learn it and what it's for. However sometimes it still doesn't work so...... it takes time...... I guess.
You Can't Learn TypeScript without JavaScript!!!
Tags: javascript, typescript, beginners, programming
Published: 2022-09-06 19:32:39

There's a frequent questions that gets thrown around, "Should I learn JavaScript or Typescript??" Well, to be frank, YOU CAN'T LEARN TYPESCRIPT WITHOUT LEARNING JAVASCRIPT!!

You don't NEED to learn TypeScript though. But that doesn't mean you should not learn TypeScript. The great thing about TYpeScript is that it is a superset of JavaScript, which means all JavaScript is valid TypeScript. And once you have no issues writing JavaScript, learning TypeScript will be easy.

TypeScript shares syntax and runtime behavior with JavaScript. The great thing about TypeScript is that it always points out the compilation errors at the time of development (pre-compliation). It supports static/strong type, which means that type correctness can be checked at compile time!

TypeScript is NOT a replacement for JavaScript. They both have their advantages and disadvantages. While JavaScript is better suited for small-scale applications, TypeScript is better for larger applications. TypeScript features prototyping while JavaScript does not. TypeScript supports interfaces, which JavaScript doesn't. And TypeScript supports static typing, which JavaScript doesn't have.

Whether you end up learning one or both, it's all up to you. But, of course, start with JavaScript and work your way up.

Happy coding!
Vue.js Basics Part 6 | Components
Tags: javascript, webdev, vue, programming
Published: 2022-09-06 19:21:24

## Components

Today, I will be talking about `components` in Vue.js. 

_This is part 6 of my Vue.js Basics series, to read part 5, please click [here](https://dev.to/ahmetmeliksah/vuejs-basics-part-5-watch-property-5fdj) (spoiler! Part 5 is about watch property)_

We will need components when creating web applications most of the time. Why? Because it's easier to produce and maintain this way. 
So, we've got parent and child components. I will share an image first, then explain on it, so it'll be easier to understand. 


![Components illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nh6wolud416zf2mndz2k.png)

As you can see from the image above, we've got several components. _This image is from [Medium](https://medium.com)_. Most of the time, main component is `App.js`. That's where we bring all our components together. Then, we've got smaller components for topbar, hero, cards, card and so on. Bottom of the image, you can see 'Card component', and 'Cards component'. This means, we can reuse components that we create in Vue. Imagine the information in the cards come from an API, all we need to do is sending `props` and looping 'card component' so we can have them dynamically. I will talk about `props` in a later post.

Let's see how this works in code. I'm still coding in [Vuejs tutorial](https://vuejs.org/tutorial/#step-11) by the way. 

```javascript
<script>
  import ChildComp from './ChildComp.vue'
export default {
  components: {
    ChildComp
  }
}
</script>

<template>
  <ChildComp />
</template>
```
Code above is 'App.vue' file. To use a child component, we need to import it first. Like so; `import ChildComp from './ChildComp.vue'`. Syntax is like this `import something from path`. So, we can name it however we want to name it, but path must be exact, otherwise it won't work. _Naming that makes sense is best practice, so please don't name it whatever you want to name it even though technically you can_

After importing our child component, we need to register it in `components` object as code above has done. Finally, we can use our child component `<ChildComp />` like this, syntax is `<ComponentName />`.

Obviously, to import and use something, we need to have that something. So, here's our child component's code
```javascript
<template>
  <h2>A Child Component!</h2>
</template>
```

------------------
That's it for part 6, we talked about components in Vue.js.

Next, I will be going through props in Vue.
Responsive Profile Page
Tags: html, css, webdev, tutorial
Published: 2022-09-06 18:52:29


<br/>
Well, this is the first project that I recorded for YouTube and shared the source code on GitHub.
This is a simple profile page. And I designed the user interface (UI) myself, Ok, not good 😂🤦🏻 Sorry, but it was my first design.
I like your comments ❤️🙏.


<br/>

### For Support Me, See:
  1. [YouTube](https://t.co/aMYyLNZsdZ)
  2. [Instagram](url)
  3. [Linkedin](https://www.linkedin.com/posts/mohammadsahragard_responsive-profile-page-with-html-and-css-activity-6972551215297482752-n_Iw?utm_source=share&utm_medium=member_android)
  4. [Twitter](https://twitter.com/MammadSahragard/status/1566787380379586560?t=WtmjmvziGmi44HpU6YXCZQ&s=19)

<br/>  

### Technologies Used  
1. [HTML](https://en.wikipedia.org/wiki/HTML5)
2. [CSS](https://www.w3schools.com/css/)

<br/>

## For More Tutorials:
###### (I mean follow and sub me. Because I don't have a video yet, this was my first video 😂.)

[**Twitter**: _MammadSahragard_](https://twitter.com/MammadSahragard)
[**Instagram**: _mammad.sahragard_](https://instagram.com/Mammad.Sahragard)
[**Linkedin**: _MohammadSahragard_](https://linkedin.com/in/MohammadSahragard)
[**GitHub**: _MohammadSahragard_](https://github.com/MohammadSahragard)
[**YouTube**: _MohammadSahragard_](https://www.youtube.com/user/https://www.youtube.com/channel/UCmlrWX41qiXEv6QNMzivxIw)
Stacking issues with z-index: Solved with isolate.
Tags: css, html, webdev
Published: 2022-09-06 18:41:48

Recently, I was working on a project that has a card with a hover animation running from the bottom right side to the top left side.

![hover effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/51xzsdp82un6h68uujjd.gif)
At first I created this effect using the HTML `pseudo-element ::after` and it worked with the `position absolute`, however, it covered all the content inside the card, which was not the effect I was going for.

![effectcover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kywa82zdevp6fxts4c73.png)

So I gave it the property of z-index: -1, but then the animation was behind the card and not visible.
To get it to work I removed the `z-index` value from `::after ` element and instead assigned `z-index: 1;` to all of the elements inside the card. This time the `hover effect` was showing up on the `heading` and `img` elements but not on the `p` element. Upon searching, I discovered that we have to make the `p` element `position:relative`. After I changed the `p` tag to `position:relative`, the effect displays perfectly.
But if we look at this approach, it is not good practice to change a lot of CSS to achieve this effect.

**code Screenshot**

![Code before using isolate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h27l6coawyhyatyqk7uf.png)

Several days later, I was browsing YouTube when I saw a short [video](https://www.youtube.com/shorts/NXu2vN052xM) from Kevin Powell explaining the CSS property `isolation:isolate`. Watching that video, I was amazed at how easy it was to create this effect without writing much CSS.
The `isolate` property creates a new `stacking context`. When we declare the parent `isolate`, it locks the content inside it. Now if we make the `::after` element `z-index of -1` it will be only negative to its siblings not the entire container!
I removed all `z-indexes` from card elements and declared only one CSS property `isolate` on the card.

![after using isolate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6e04el9pdjnqrx1f6m6.png)

![after](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mp5ifonau0pnfn9u8hn.png)
We can now see that the code is much cleaner and does not have any additional side effects.

Thanks for reading this. Please do share your feedback & suggestions in the comments section.
Announcing the Pulumi Challenge
Tags: pulumi, startup, aws
Published: 2022-09-06 18:32:17

Introducing the Pulumi Challenge, launching today! We think Pulumi is an amazing IaC tool that increases developer velocity and handles the scale of the cloud with ease. Try it out for yourself by taking a Pulumi Challenge! You’ll build something cool, and we’ll send you some super secret swag in return. We promise it’s better than a t-shirt.

The [Pulumi Challenge](https://www.pulumi.com/challenge/) is a series of specialized tutorials, released monthly. Each challenge will guide you through building a real-world application, some of them useful and some of them silly, showcasing the varied ways Pulumi can be a lifesaver for your team at work or your side-projects at home. At the end, you’ll have something you can use, and we’ll send you swag unique to each challenge too!

##How it Works
Work through the Challenge tutorial to build a real-world application, personalizing it as you go. You’ll learn how Pulumi works to ease integration and infrastructure deployment through providers for major cloud providers, Kubernetes, observability tools, CI/CD systems, dynamic providers, reusable component resources, and more.

Once a Challenge is complete, our swag provider will kick off and send you the unique item for that Challenge. Every challenge offers something different, so complete them all as we release them!

There’s another way to get more swag, though: Write a 500-word blog article or post a 3-minute video about your Pulumi Challenge project, and we’ll send you something even nicer.

##The First Challenge
Our inaugural Pulumi Challenge is [Startup in a Box](https://www.pulumi.com/challenge/startup-in-a-box/). We’ll walk you through building a customizable landing page for your startup, side-project, current hyperfixation, or pet, all deployed to AWS S3 with Cloudfront for a CDN and Checkly for monitoring! You’ll learn about interacting with AWS services through Pulumi, deploying to S3, building reusable components, using Providers with Checkly, and building Dynamic Providers.

{% youtube NU7uOy273jQ %}

[Try it for yourself](https://www.pulumi.com/challenge/startup-in-a-box/), and [follow us on Twitter](https://twitter.com/pulumicorp) to get a heads up when a new one launches!
My Thoughts on MLM Business Model
Tags: business, mlm, beginners
Published: 2022-09-06 18:29:56

Hello DEV community! I have thus returned to the world of programming - where I feel more myself and, to be honest, more at home than ever. What do they say? No place like home.

Recently, I got involved in a multilevel marketing business and here's my take:

*First, for those who aren't familiar, a multilevel marketing (MLM) is a business model that involves unsalaried, hierarchical sales teams selling products with recruiting additional company sales representatives...that's the jist*

The business model is a legitimate business strategy. Existing members are encouraged to promote and sell the products while doing their best to bring on new recruits onto the business.

In reality, it's very hard to make money on this business plan as a new recruit. Most people don't end up making that much money at all. The self-development, the events, the association you get around of people trying to get out of the 9 to 5 and build a dream life is all great and it's a wonderful mindset to have. But there are many other ways to make money and there are countless of other communities with the same mindset.

The problem is, once you get into an MLM "community", there's a stigma (almost) about being associated with anyone outside the business because "they're a distraction from the bigger picture and what you goal is" if they don't understand the business model. From who you hang out with to who you could potentially want to date, they want to know if this person is a potential new recruit. And, if not, they are not worth YOUR time. 

But ALLLLL throughout this, you're only going to these people for "guidance" because they've gone before you and are being taught by multi-millionaires. You "don't have to listen to them" but...essentially, "you'll see what happens if you don't" since you'll be wrong and you'll get the "I told you so" speech.

Uhhh...toxic much? And they advertise the community as "healthier" than the rest of the world, more advanced, more connected, more into self-development, etc., etc. Hmmm sounds opposite to me.

But anyway, left that behind. Will revisit the business venture another day in education or freelancing with CS but feels nice to be back behind the computer.

Happy coding!
Why You Should Learn Python
Tags: python, beginners, programming
Published: 2022-09-06 18:16:23

Python is a very popular programming language today, especially as a beginner language. It is widely used in various sectors such as web development, machine learning, and data science. Python has surpassed Java as the top programming language!

Python is commonly used for developing websites and software, task automation, data analysis, and data visualization. In general, it takes around 2 to 6 months to learn the fundamentals of Python. Developing mastery of Python's vast array of libraries can take months or years, but don't let that derail you from your end goal.

The only recommended background when learning Python is that you be comfortable writing programs and have an understanding of high-school math (algebra and pre-calculus, possibly).

Learning Python as a part of a wider data analytics skill set will also make you a stronger candidate, as data analysts are expected to have a side array of skills. Some of the hottest fields in tech right now - machine learning and artificial intelligence - rely heavily on programmers with Python skills.  

Advantages of Python include but are not limited to:
- Easy to read, learn and write
- Improved productivity
- Interpreted language
- Dynamically typed
- Free and open source
- Vast libraries support

Python can be used for:
- AI and Machine learning
- Data analytics
- Programming applications
- Game development
- Finance

Happy coding!
September 2022
Tags: apachepulsar, apacheflink
Published: 2022-09-06 18:14:19

[https://www.linkedin.com/pulse/its-already-september-2022-tim-spann-](https://www.linkedin.com/pulse/its-already-september-2022-tim-spann-)

{% embed https://www.linkedin.com/pulse/its-already-september-2022-tim-spann- %}
Import and Export in JavaScript.
Published: 2022-09-06 18:11:54

There are two types of exports in javascript.
1) default export
2) named export

**Default Export**
Let's create a file named myAddress.js

```
myAddress.js

const myAddress = {
    name:"Sujith",
    country:"India",
    phone:45342....,
}
export default myAddress
```
Now in home.js, let's import the object in myAddress.js

```
home.js

import myAddress from './myAddress.js'
import addrs from './myAddress.js'
```
`export default myAddress` always defaultly exports the myAddress object. So even if we import addrs from myAddress.js, we only get myAddress object because it is defaultly exported.

**Named Export**
Let's create a file named myAddress.js

```
country.js

export const myCountry = () => {console.log(India)}
export const myState = "Kerala"
```
Now in home.js, let's import the object in myAddress.js

```
home.js

import {myCountry as country, mySate} from './country.js'
```
In country.js we are exporting each function, objects, variables individually. So we can import each one of them individually.
[EN] The secret repo of GitHub ?
Tags: github, programming, tutorial, productivity
Published: 2022-09-06 17:38:41

Many know this trick, but many do not use it! Why ?!

We go from a basic Github profile (not pretty 😒) to a profile like this 🤩:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z3syjhsvo5yg6msk9ydl.png)

------------------------------------

How to achieve it?

Very simple !

_**(You will find all the necessary links to continue below the explanations)**_

All you have to do is create a repository that will bear the name of your GitHub **nickname**! (You will even get a little message indicating that you have found the _secret deposit_ 🤫)

You succeed ? Perfect !
We then continue.

Now everything will happen in your **README**. If you go there, you can see that it is already pre-configured.
But you're going to say to me: "Is that all you have for us?!"

And no, because the magic will operate **here**!
A gentleman by the name of **Rahul Jain** will make our task easier!

He automated everything for us!
You will be able to put your information and everything you want to put and then download your own README to put on your repo! Nice isn't it?!

------------------------------------

The link to make your Repo: [Here](https://rahuldkjain.github.io/gh-profile-readme-generator/)

If you want to find out more about all this, Guillaume Reygner, who writes a lot of articles, has one on the subject right [**here**](https://guillaume-reygner.medium.com/github-profile-master-803c494271ba)!

If you don't like the rendering and you don't have an idea, here is a repository with [templates](https://github.com/abhisheknaiidu/awesome-github-profile-readme).

If you liked this article and/or want to contribute to it, leave a comment/like!