teleren/devto huggingface dataset:
How to put your website online in under 10 minutes?
Tags: github, beginners, webdev
Published: 2021-11-08 06:01:45

<p><img alt="" src="https://ibb.co/PC6GRGM" />As a beginner in web development, you may always think about&nbsp;how to actually put a website you made, on the internet. In this blog, you are going to learn how you can do it in less than 10&nbsp;minutes with simple steps using Github pages.&nbsp;</p>

<h2>End Result</h2>

<p>This is what we are going to make by the end of the blog. See the URL, it&#39;s on the internet 👀.</p>

<p><em>(This is a simple calculator webapp which contains HTML,css,js files)</em></p>

<p><img alt="" src="https://ibb.co/PC6GRGM" /><img alt="" src="https://i.ibb.co/VBqYdYx/endresult.png" style="border-style:solid; border-width:1px; height:344px; width:639px" /></p>

<h2>Prerequisites</h2>

<ul>
	<li>A&nbsp;website having HTML, CSS, Javascript files. (because Github pages support only static websites)</li>
	<li><a href="https://github.com" target="_blank">Github</a> account.</li>
	<li>Basic knowledge about git.</li>
</ul>

<h1>Let&#39;s get started</h1>

<h3>Step-1:&nbsp;</h3>

<p>Create a repository on GitHub and add all your HTML, CSS, js files.</p>

<p><em>Note: Make sure you make the repository public.</em></p>

<h3>Step-2:</h3>

<p>Open repository and click on <strong>Settings.</strong></p>

<p><img alt="" src="https://i.ibb.co/PMKqqQ2/Settings.png" style="height:329px; width:640px" /></p>

<h3>Step-3:</h3>

<p>Scroll down and click on <strong>Pages</strong> from the left panel.</p>

<p><img alt="" src="https://i.ibb.co/SyVtGPp/pages.png" style="height:329px; width:640px" /></p>

<h3>Step-4:</h3>

<p>Now you have to enable GitHub pages for the repository. To do so, click on <strong>None</strong> and select the main branch of your repository. In my case it is <strong>master</strong>.</p>

<p><img alt="" src="https://i.ibb.co/kQCR5FH/master.png" style="height:330px; width:640px" /></p>

<h3>Step-5:</h3>

<p>After selecting the branch, the save button will be enabled, so click on <strong>Save</strong> to confirm.</p>

<p><img alt="" src="https://i.ibb.co/VBkCz9z/save.png" /></p>

<h3>Step-6:</h3>

<p>Now, you can see an indication saying - <q><em>Your site is ready to be published at &lt;URL&gt;</em></q></p>

<p><img alt="" src="https://i.ibb.co/VWZxrGJ/ready.png" style="height:329px; width:639px" /></p>

<h3>Step-7:</h3>

<p>Wait for few minutes and refresh the page. That indication will be changed to - <q><em>Your site is published at &lt;URL&gt;</em></q></p>

<p>Click on the link and that&#39;s it your site is ready and you can share the URL with anyone and show off your project.</p>

<p><img alt="" src="https://i.ibb.co/RB5vC5g/done.png" style="height:328px; width:639px" /></p>

---

Refer to this blog to deploy your react app with GitHub pages:
{% embed https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f %}

---

Also read:
[How to host your website on Azure?](https://dev.to/rakeshpotnuru/how-to-host-your-website-on-azure-5h11)

---

Hope this helps you!
Save for reference.
Follow me for more 😃.
[Bahasa Indonesia] "Golden Rule" dan Definisi "Rusak" untuk Seorang Frontend Developer yang Berkualitas
Tags: productivity, webdev, codenewbie, bahasa
Published: 2021-11-08 05:58:36

## One of Engineer's Golden Rules

> "if it ain't broke, don't fix it"

Kalo ga rusak, ga usah dibenerin.

Itu salah satu rule/aturan tidak tertulis yang biasanya digunakan para engineer atau orang teknik. Kalau kita coba memahami dari sudut pandang engineer, memang logis. Untuk apa memperbaiki sesuatu yang tidak rusak?

## Frontend Developer Job Description

Nah, sebagai seorang Frontend Developer, terutama yang bekerja di Indonesia, dengan orang Indonesia, terkadang pekerjaan Frontend Developer sendiri masih belum terlalu spesifik job description-nya. Apalagi di studio/perusahaan kecil.

Orang-orang cuma tau "ya pokoknya yang bikin UI". Bikin button, nge-layout.

Padahal frontend development bisa lebih serius dari itu.
- Harus pixel-perfect (persis banget sama desain buatan UI Designer)
- Harus terintegrasi ke backend dengan baik dan benar. Sebisa mungkin tidak ada celah untuk abuse.
- Harus bisa memahami desainer dari hati. Jika terjadi kesalahan di tampilan web, kemungkinan penyebabnya ada 3:
1. Desainer salah bikin desain
2. Frontend Developer salah implementasi
3. Teknologi tidak mendukung

Memahami desainer dari hati penting untuk menyelesaikan problem nomor 1 dan 2.

## Apa itu "rusak" bagi Frontend Developer

> Kalo ga rusak, ga usah dibenerin.

Rule di atas tidak berarti kalau kita tidak tahu apa itu "rusak".

"Rusak" dalam kamus seorang Frontend Developer yang berkualitas itu termasuk:
- Hasil implementasi tidak sesuai desain. Ini tergantung tingkat toleransi dan kemampuan memahami desainer. Misalnya toleransi `0px`, berarti bener-bener harus persis plek-plek sama desain. Contoh lain, toleransi 5px, berarti kalau di desain _spacing_-nya `45px`, kita boleh implementasi jadi `40px` (misal kita ambil `40px` karena itu sudah predefined di [TailwindCSS](https://tailwindcss.com/), jadi mempercepat proses).
- Kebanyakan user merasa tidak nyaman saat memakai _interface_-nya. Iya, ini berarti "rusak".
- Desainer tidak setuju dengan desainnya sendiri. Ini juga "rusak". Harus dibenerin dan jangan sampai terjadi lagi di masa depan.

---

OK, sekian dulu, let me know kalau postingan ini bermanfaat supaya saya termotivasi untuk bikin lagi.

Jangan males makan siang!
La evaluación de productos, procesos y recursos
Published: 2021-11-08 05:40:07

Esta infografía fue creada para una tarea de la Universidad Francisco Gavidia, video de referencia: https://www.youtube.com/watch?v=j1QHt7Xx4z4

![Infografia de procesos y recursos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7xv9ukd6e97ipiekjwml.png)
November 2021 Update
Published: 2021-11-08 04:54:38

---
title: November 2021 Update
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

Hello everyone! Happy November!! 
I am glad to have made it this far with my web development // software development learning journey. 

There is so much to always learn and I always try to understand complex topics as much as possible but sometimes things are just confusing. However I have learned that the more practice the easier things become and the confusion clears up. 

When facing information overload it does tend to become intimidating to want to start or continue that is why taking breaks is important to give yourself a fresh perspective on problems. 

Burnout happens and it is okay as long as there is a new starting point to continue then everything feels new again. 

So TLDR just keep trying//practicing//learning and one day it all makes sense.
Build Any App
Published: 2021-11-08 04:48:50

#If I Could Build an App... 
I would want to build an app that would help people sell each other junk that they do not need anymore to those who need it.  People would put a search out for an item that they would like, and they will be recommended items that are exact matches or very similar to the request.

#Who would it be for?
The app would be for those who do not want to spend lots of money on brand new items and are looking for things that have been used and feature a reduced price tag.

#How Would They Use It?
It will search those nearby first, and then those outside of an approximate radius, to reduce the need for shipping.  The application is used on mobile devices and algorithms will help find similar results if exact results are not found.  Requests will stay active on the application and an alert will be given if a match is made.

#How Would You Use It?
I would use it to find obscure collectibles or maybe even vintage clothes.  I will try and find things that I like/want, without having to pay the full price.

#If money was no concern, time no concern; what would you do with your life and the skills you've assembled if you could dedicate it to one thing?
I would really like to become a web developer one day and create contemporary and interactive websites.  I think design is a very interesting area to work in, and it would keep my creativity active.
Don't use timestamps with multi-image uploads.
Tags: laravel, php, programming, tutorial
Published: 2021-11-08 04:41:16

I'm pretty sure all programmers have had to write code to upload an image at some point, and I'm pretty sure most of you have used a timestamp as the image name. Well...I recently ran into a situation where this is a bad idea, let me explain why.

#Don't use timestamps
Let's run through a scenario with some code. Let's take an array of names and concatenate a timestamp onto those names and see what happens.

```
$names = collect([
        '0' => 'Jonathon',
        '1' => 'Justin',
        '2' => 'Sally',
        '3' => 'Sally',
    ]);

    $testArray = [];

    foreach ($names as $name) {
        $testArray[] = $name . '-' . time();
    }

    dd($testArray);

$results = array:3 [▼
  0 => "Jonathon-1636344452"
  1 => "Justin-1636344452"
  2 => "Sally-1636344452"
  3 => "Sally-1636344452"
];
```

Did you notice all the timestamps are the same. This is because the snippet of code ran so quick that the timestamp never changed, it never had a chance to get to the next time.

I ran into this exact situation recently. I was uploading multiple images at ones, storing them on Amazon S3 and saving the path to the database. When I saved the images I set the file name to `time() . '.jpg';`, which obviously causes an issue because now I have duplicate files named the same thing and duplicate file paths stored in the database.

#Whats the solution?
Well...I'm sure there are a lot of solutions, but the main thing is that on each loop you want to get a unique value each time. So..What I did was used the [Laravel](https://laravel.com/docs/8.x/helpers) `Str::random(8)` helper function. And this is what we get:

```
$names = collect([
        '0' => 'Jonathon',
        '1' => 'Justin',
        '2' => 'Sally',
        '3' => 'Sally',
    ]);

    $testArray = [];

    foreach ($names as $name) {
        $testArray[] = $name . '-' . Str::random(8);
    }

    dd($testArray);

$results = array:4 [▼
  0 => "Jonathon-SeTNhsmL"
  1 => "Justin-2sjRUxg8"
  2 => "Sally-Laytdn5m"
  3 => "Sally-6cUDA5Cd"
]
```

As you can see we're now getting a unique value each time. Keep in mind the longer the string, the better your chances of returning only unique values if you have a large dataset.

If you have another solution, comment below. I'd like to hear them!
Webpack vs Babel
Published: 2021-11-08 04:35:28

What is the difference between Babel and Webpack?

Webpack is a modular build tool that has two sets of functionality — Loaders and Plugins. Loaders transform the source code of a module. babel-loader transpiles JS code given the presets. Plugins are the core of Webpack. They can do things that loaders can’t. Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environment. Basically, Babel makes JS code easier for humans to read and write.
Where do I start when I want to build a React App based existing JS?
Published: 2021-11-08 04:31:28

So, I'm the first to admit I really struggle with React. I'm fine with JS and JQuery and have even completed many, many React tutorials. But when it comes to converting an existing JavaScript script into a React component, I'm completely stumped.

Right now I have a JavaScript script that is moderately complex.

It reads user data from and object in an external .js file. 
Based off that data (or combinations of that data) the script writes elements to the DOM or fires off a modal.

So, for example, a *simple* if statement might be:

    if (userdata.userage > 50 && userdata.userjob.userincome > 100000){
      $(".js-modal-body").load(info[key].content);
      $('#alertModal').foundation('open');
      Cookies.set(modalName, '1', { expires: 7 })
    }

And so on.

I won't paste the whole code in here, but basically it consists of:

 1. An import, brining in the userData object from a user.js file.
 2. A stand-alone helper function that returns the user's age based of their inputted date-of-birth and today's date.
 3. A series of if statements like the one above. Some if statements fire off Modals, some write new card elements to the DOM. Some also create cookies.

My question is where do I start when want to convert this to react?
Build Anything? I Wish..
Published: 2021-11-08 02:31:04

###If you could build an app, website, or technology of any kind, What would it do?

I've always wondered this question, if given all the necessary resources.. money.. time.. motivation. Sitting here trying to think of something that I would love to create from scratch has turned out to be super difficult, yet only one thing comes to mind. Video games. The one thing I have always turned to as a way of escape and enjoyment, and have always had a strong passion for. But is it the way the games were built that I love so much.. or is it the constant grind and strive to be the best in any game I play? Honestly.. winning is just too much fun. To be able to build my own website to potentially put whatever I want gaming-wise is something that interests me very much, yet can't find the motivation to put the effort in. Even just for the experience in coding, something like this would be worth the time.

###Who would it be for? How would they use it? How would you use it?

Honestly, something like this could be for anyone who would want to view the highlights, clips, images, or following the journey of doing what I enjoy most. Would it be the most impressive thing ever created? No, not at all. Would it be sick to create something just to show off what I love? Absolutely.

###If money was no concern, time no concern; what would you do with your life and the skills you've assembled if you could dedicate it to one thing?

I've asked myself this question many times in the past, and the answer still stands as playing video games. I have had a passion for video games since I was 6 years old, and have always had the drive to be the best I could with whatever I played. I have met some of the greatest people online and have had some of the best experiences and memories created by just playing with friends. As everything in the world does, time passes and things change. Most friends don't have the time to do the things we used to anymore, and have to adjust their lives to fit their own situations. Video games to me are more of a way to escape life's stressful times and enjoy the times I have doing what I love. The more people say they are a waste of time with no real value, the more I continue to play, as most people don't realize how much they help. They connect people, putting each other and surrounding everyone with like-minded interests and passions, while having a great time. I would totally put everything I had into just playing anything I love if I could, yet we don't live in a fiction book. I have spent tons of time trying out different hobbies, thinking of different work I could do, and even go suckered to going to college to figure out something I had any interest in for money... coding is fun and exciting to learn when you are surrounded by motivated people and professors putting the time in to teaching valuable lessons, but if time and money weren't an issue.. video games is where I'd spend my days.
my lua experience
Tags: cpp, gamedev, github, lua
Published: 2021-11-08 01:39:46

got to try the lua programming language and the love2d game framework for the first time... here are my thoughts...

lua -
1. its a cool lang
2. the syntax is weird

love2d -
1. its ez to implement things
2. alot of open source stuff
3. overall its a great game framework for beginners

my overall review is 8/10

heres what i made: https://github.com/scoopydevy/zelda-lua
Tech wish
Published: 2021-11-08 00:58:21

If I could build an app, website, or technology, I would want to build an app that could help bring education on any topic to anybody in the world. If someone wanted to learn what happened during the 1600s they could go to the website, or if they wanted to learn how to solve calculus problems they could go to the website.

## Who and how
The website would be for anyone with a curious mind. There is a lot of gatekeeping around higher education and sometimes free ones are looked down upon. In the world of engineering, some engineers went to an Ivy League school, but work with someone on their team that learned from buying textbooks and free online resources. The only difference between those two people is that one paid a lot of money for a piece of paper and one had a curious mind and the discipline to do it on their own.

They would use it by searching a topic, and having a certified course/resource pop up that someone had created, teaching them the topic.

## How I would use it
I would use it by assisting me with my passions and furthering my knowledge of certain aspects of technology. It would be information at peoples fingertips, without having to search through google for reputable sources and good information.

## My passion
With the skills I have assembled and the interests I have gained along the way, the one thing I would like to do with my life would be to work in eSports/gaming. Ever since I have been a little kid I have played video games with my brother and it brought us closer together and I would like to make that possible for future generations.

Being able to be a part of something and help improve it with the skills and experience I have would be an opportunity of a lifetime and not a "Job".

As time goes on and as I work at a consulting company doing cybersecurity for medical devices, I start to want to help build something that is creative and people go to for an escape. For me, video games has always been that so why not try to make my escape the thing that provides for my family.
Contemplating Life
Tags: javascript, webdev, programming, tutorial
Published: 2021-11-08 01:18:30

At some point you have to stop what you're doing and think about your life. This is something I like to do daily. What is my future? What do I want to do? Who do I want to work for? Do I want to work for anyone? The answer to these questions is that I don't have an answer, but that's okay. My future could be a lot of things.

#Development
One of my current front runners is working as a front end developer. My goal is to find a job where I can change lives through building a useful website. What does that mean? I would like to build usable websites. I want to improve lives. I envision my life working on an app or website to make the world a better place. And yes I recognize how cheesy that sounds.

#What is the App
Most industry jobs may pay well, but will they really help the world? What kind of website does this and how do I find it? I would love to help people by teaching them things that they cannot learn easily for free. Khan Academy started with a guy tutoring his niece on YouTube. Personally I have really enjoyed the tutorial videos I have made. If money were not a problem that seems like a great way to make an impact on people. 

By making tutorial videos I can share my skills. I can explain technology to people who want to learn. This can manifest itself through a YouTube channel, a website, or even an app. 

Overall I have no idea what I want to do, but that's the beauty of life. I have years to make decisions and change them and do it all over again. Nobody gets it right the first time around.
100 días de código: 4 y 5, a veces los días son mas ocupados de lo que crees.
Tags: spanish, webdev, 100daysofcode
Published: 2021-11-08 00:49:39

¡Hey hey hey!

Bienvenidos a este nuevo blog despues de haberme saltado un día, he descubierto que a veces tengo el día demasiado ocupado. Apenas me pude permitir 4 horas de mi tiempo para codificar en estos dos días!!!! y eso para mi es una tragedia ya que es mi actividad favorita. 

Ahora volvamos al pasado para contarles el día de ayer...
![delorean](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pg630sftmqoxayma6ylt.jpg)
Photo by [Delorean Rental](https://unsplash.com/@deloreanrental?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/back-to-the-future?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

### Ayer: 
- Diseñe algunos componentes de la interfaz móvil de mi portfolio.
- Aprendí que en diseño normalmente se crean paletas de color y de esas paletas se obtienen distintos tintes y sombras de cada color de la paleta. 
- Aprendí las leyes de Gestalt las cuales son: Ley de figura y fondo, de semejanza, de proximidad, de la continuidad, de simetría o dirección común, de la simplicidad y ley de la continuidad.
- Aprendí a crear un servidor y a ejecutarlo en desarrollo.
- Aprendí las peticiones `http` como son `post`, `get`, `put` y `delete` con express en un servidor de nodejs.

### Hoy: 
- Aprendí los códigos de estado de respuesta se agrupan por números de los cuales 
 - Las respuestas informativas van del código 100 al 199.
 - Las respuestas satisfactorias van del 200 al 299.
 - Las respuestas de redirección van 300 al 399.
 - Las respuestas de error del cliente van del 400 al 499.
 - Las respuestas de error de servidor van del 500 al 599.
- Comencé a realizar pruebas de funciones asíncronas en una api backend.
- Obtener los parámetros de ruta personalizados y aprender el uso de los middlewares en el backend con nodejs y express.

Ahora si regresemos al día de hoy...
![meme back to the future](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ckmc1gu0uli0mhny7yq.jpg)

No mencionare lo de ayer porque directamente esta en la parte de arriba 👆 pero si lo que realice...

### Hoy: 
- Termine el diseño de mi pagina web en móvil y en Tablet.
- Aumente mi puntuación en *Problem solving* en HackerRank.
- Comencé a ver algunos frameworks de Css tailwind, SASS, Foundation, Bulma y SemanticUI.
- Aprendí que Tailwind Css solo se puede instalar en `Nextjs`, `Vuejs`, `Laravel`, `Nuxtjs` `React` y `Gatsby`.

También comprendí despues de estos días que hay que establecer una serie de metas en el desarrollo semanales o mensuales para realizar un seguimiento del uso del tiempo asi que mañana comenzare con una planeación para la semana. 

¡Que tengan un gran día o noche y mucho éxito con sus proyectos!
No olviden sonreír y es todo, hasta mañana.