teleren/devto huggingface dataset:
Upgrading to React 17 and Webpack 5
Tags: react, webpack, babel, javascript
Published: 2020-10-26 01:36:30

# **Breaking Changes!!**

In [my last post](https://dev.to/markhker/react-app-from-scratch-10n8) I showed you how to create a React app from scratch with Webpack. Since then, these libraries have been updated with new features and interesting alternatives.

At least in Webpack…

This week was released a new version of React and I couldn't be more happy about it. As they mention in [this blog post](https://reactjs.org/blog/2020/10/20/react-v17.html) this new version does not contain any new features for us, the developers. Instead, they focused this release on features that enable gradual updates.

And, the release of Webpack 5 which has many new features.

# **The I'm more of a code type of person**

[The github repo](https://github.com/markhker/react-from-scratch/tree/upgrade)

# **Upgrading Packages**

First, lets update react and react dom:

```shell
yarn upgrade react@17.0.1 react-dom@17.0.1
```

Since React 17 we can use the [new jsx transform](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html), so we will need to upgrade our babel tools and install a new plugin:

```shell
yarn upgrade -D @babel/{core,preset-{env,react}}
```
```shell
yarn add -D @babel/plugin-transform-react-jsx
```

Next we will need to update our .babelrc file to look like this:

```js
{
  "presets": [
    "@babel/preset-env",
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ]
}
```

Starting from Babel 8, "automatic" will be the default runtime for the plugins.

# **Removing Unused React Imports**

The new JSX transform automatically imports the necessary functions and React is no longer needed to be in the scope.

Inside our 'src/index.js' we can get rid of the `import React` statement:

```js
import ReactDOM from 'react-dom'

const App = () => <div>Hello there!!</div>

ReactDOM.render(<App />, document.getElementById('root'))
```

And that's it, when you create a new React component you don't need to `import React` anymore.

# **Upgrading Webpack**

Webpack 5 has many breaking changes, so we will need to upgrade our dependencies and our code.

Let's start by upgrading webpack itself and the cli tool:

```shell
yarn upgrade webpack{,-cli} --latest
```
Change the "start" script in your package.json file:

```json
...
"start": "webpack serve --mode='development'"
...
```

That's it.

This is still a pretty much basic (but powerful) configuration, we will need to add more tools to create a full fledged React app.

[Share this on Twitter](https://twitter.com/intent/tweet?url=https%3A%2F%2Fmarlom.dev%2Fupgrade-to-react-17-and-webpack-5)
Retrieving Data from Firebase Realtime Database
Tags: database, javascript, webdev, codenewbie
Published: 2020-10-26 00:59:17

In my [previous post](https://dev.to/maasak/set-up-firebase-realtime-database-for-javascript-app-4k0l), we were successfully able to submit data from the JavaScript form and save it into the Firebase Realtime Database.  This was confirmed by checking the Firebase console and seeing that the inputted data was in there.  Here is what the database looks like in the console right now: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bgenfmoyhystach4vatd.jpg)

##Retrieving/Reading Data

For this bug tracking app, we will need to extract the inputted information so that it appears on the DOM as an issue ticket. 

To start off, let's first set our reference to the location we are looking for in the Firebase database to a variable `issuesRef`.  We will be passing in the child/path of `issues/`: 

```javascript
const issuesRef = firebase.database().ref('issues/');
```

Now we can work off of the reference to read the data by using Firebase's `on()` method, which accepts the `value` event type and callback function `snapshot` to get the "DataSnapshot".

If we look at the current data structure as shown in the image above, we see that under the `issues/` path, there are nested ID numbers for each issue with their corresponding properties, so we will be iterating through the DataSnapshot.  Then, we will call the `val()` function on each one, which returns a JavaScript object.  

We will be using Bootstrap to create a card for each issue ticket, and to get the properties of each issue, simply use dot notation.  

The code will look like this: 

```javascript
function readIssues() {
  issuesRef.on("value", function(snapshot) {
    snapshot.forEach(snap => {
      const issue = snap.val();
            
      document.getElementById("issuesList").innerHTML += `
        <div class="card mb-3" id="${issue.id}" style="width: 25rem">
          <div class="card-body">
            <h3 class="card-title">${issue.desc}</h3>
            <h6>Issue ID: ${issue.id}</h6>
            <p><span class="label label-info">Status: ${issue.status}</span></p>
            <p><span class="glyphicon glyphicon-time">Priority Level: ${issue.priority}</span></p>
            <p><span class="glyphicon glyphicon-user">Assigned to: ${issue.assignedTo}</span></p>
            <button onclick="setStatusClosed('${issue.id}')" id="closeButton" class="btn btn-warning mx-3">Close</button>
            <button onclick="deleteIssue('${issue.id}')" class="btn btn-danger mx-3">Delete</button>
          </div>
        </div>
      `
    })
  }
)}
```

So now we have the issue tickets appending on the DOM like this: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8bvg7ihzaxjdfzastffg.jpg)

I will write about updating and delete data with Firebase Realtime Database in my next post. 

^_^

##Helpful Links

https://firebase.google.com/docs/reference/js/firebase.database.Reference

https://www.tutorialspoint.com/firebase/firebase_read_data.htm
Data transfer with Migration (マイグレーション中のデータ移行)
Published: 2020-10-26 00:56:01

---
title: Data transfer with Migration (マイグレーション中のデータ移行)
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---

## Point
```ruby
Model.reset_column_information
```

It makes AR reload the column information.

## Example

```ruby
class ChangeColumnTypeInCompanies < ActiveRecord::Migration[6.0]
  def up
    add_column    :companies, :r_id, :string, comment: 'registration_id', after: :id

    # マイグレーション中にデータ移行するので、直前に足したカラム情報を読み込む
    # https://github.com/rails/rails/blob/v5.1.4/activerecord/lib/active_record/migration.rb#L409-L424
    Company.reset_column_information
    Company.find_each {|company|
      company.update(r_id: company.registration_number&.to_s)
    }
    remove_column :companies, :registration_number
  end

  def down
    add_column    :companies, :registration_number, :integer
    Company.reset_column_information
    Company.find_each {|company|
      company.update(registration_number: company.r_id&.to_s)
    }
    remove_column :companies, :r_id

  end
end
```
Desde Cero 
Tags: html, beginners, webdev
Published: 2020-10-26 00:49:53

Soy totalmente nueva en estos temas, mi carrera es Administrador Financiero y me dedico al análisis comercial.
A raíz de ver todo lo que se puede hacer solo con HTML decidí comenzar a aprender sobre esto.

Entiendo que HTML es un lenguaje que estructura el contenido de las páginas por medio de etiquetas y atributos.
Las etiquetas están divididas por su funcionalidad, existe una semántica y hay un orden específico para estructurar un esqueleto 

Aquí mi primer intento de estructura
![primer codigo](https://dev-to-uploads.s3.amazonaws.com/i/234fv83zlgg3xtflzvjb.png)
Este primer intento fue muy sencillo, aun así, si hubiera tenido la idea de cómo quería que se viera antes de comenzar la estructura, sería más fácil.
Pude observar que es importante que las líneas sean claras para que se pueda apreciar fácilmente el orden del esqueleto y tener menos complicaciones a la hora de revisar si las etiquetas estaban cerradas o bien colocadas.

Cualquier comentario es bienvenido! 😊


Nota: Imagen de portada tomada de: [deustoformacion](https://www.deustoformacion.com/blog/programacion-diseno-web/etiquetas-basicas-html-que-debes-conocer)
First Hacktoberfest Completed!
Tags: hacktoberfest, opensource, github
Published: 2020-10-26 00:16:27

Getting involved in open source has always been a goal and Open Source Day (OSD) at the 2020 Virtual Grace Hopper conference was the push I needed. I created my very first pull request at the beginning of the month and I'm now at 4 approved requests and counting!

##Contributions:
1. [sqlfluff](https://github.com/sqlfluff/sqlfluff/pull/489): added new rule to prefer UNION over UNION ALL
2. [my-photo-timeline](https://github.com/wiringbits/my-photo-timeline/pull/10): updated function to correctly name duplicated files
3. [cockroachdb](https://github.com/cockroachdb/docs/pull/8559): fixed code smell and syntax issues
4. [cockroachdb]
(https://github.com/cockroachdb/docs/pull/8632): updated postgresql commands
"expiresIn" should be a number of seconds or string representing a timespan - JWT
Tags: jwt, node
Published: 2020-10-26 00:13:19

I had set TOKEN_EXPIRATIONS=7d on my .env file and was not working properly. So I found 2 ways to fix the problem:

1) On .env file write: JWT_EXPIRE=somethingYouWant
2) On .env file write: TOKEN_EXPIRATION = 7d ( example ) and in your  sign method JWT you can do this:
const token = JWT.sign({ id, email }, process.env.TOKEN_SECRET, {
    expiresIn: parseInt(process.env.TOKEN_EXPIRATION),
 });
YouTube speed control with JavaScript
Tags: youtube, javascript, control, speed
Published: 2020-10-25 23:52:39

[[Clique aqui para ler em português]](https://medium.com/walternascimentobarroso-pt/controle-de-velocidade-do-youtube-com-javascript-a19e057b07f9)

On YouTube the biggest speed of the player is only 2x, but sometimes we fall into a video that even when you put it in 2x it still seems like the person is talking very slowly, and for these cases the ideal would be to increase the speed even more, so let’s create a script that solves this with JavaScript.

## Step by step

1. First access any YouTube video, Ex .:(https://www.youtube.com/watch?v=RC6qFlXxsio)
2. Then open your browser console (F12)
3. Go to the console tab and type:

```javascript
document.getElementsByClassName("video-stream html5-main-video")[0].playbackRate = 2.5;
```

After typing and enter your video will play 2.5x faster if you want even faster just change the 2.5 for the number you want and if you want to slow down just put a smaller number, example (0.5).

In the script I also added for vimeo, you have to follow the same step by step and at the end execute the script:

```javascript
document.querySelector('video').playbackRate = 2.5;
```
Follow the script on gist
{% gist https://gist.github.com/walternascimentobarroso/84bb4b43c4faa1bfaf1b7cb983385e88 %} 
***

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you! 😊😊
Advice on rolling out new features.
Tags: advise, programming, features, website
Published: 2020-10-25 23:51:00

Hey everyone! I started a Saas business 2 years ago which I built from the ground up using Laravel and a handful of other technologies. I recently released a feature that required me to get rid of the old feature and I received a little bit of pushback from some of my users.

How do I allow the user to access both the old and the new feature without spinning up a beta version on another server? You know when a big company is pushing an update and there's usually a notification that says "Want to try the new version?" and you click it and "poof!" you're on the same site but a new version and you can switch back, how is this accomplished?

I would love to be able to implement something like this going forward in order to offer a better user experience for my users.

Any feedback would be greatly appreciated, thanks!
A Weekend and take home assessment
Tags: webdev, rust
Published: 2020-10-25 23:33:14

I spent 48 hours trying to complete a take home programming assignment from company X. 
I had heard about these strange employers that deviate from the norm of Hackerranks and Codesignals, but this was the first time I'd actually come across one of such companies. 

To be honest, it was a breath of fresh air. I have spent the last few weeks studying Data Structures and Algorithms while hoping that the next leetcode question doesn't completely break me. As I read the prompt, I got excited with every word. Finally, I get to do something more than reverse a binary tree.

A few hours ago, I turned in my solution. It was "hacky" and not as polished as I would've liked, but it worked...for the most part. Over the weekend I had to pick up a new programming language in Rust and learn it just enough to send data over web sockets. I had to figure out how to use various services, and my eyes watered from scrolling through documentation, but it was FUN.

It felt exciting to hack a solution together. Is THIS real life?

Maybe I should continue learning Rust. 
Maybe I should pick project and a language and just hack a solution together. 
Or maybe I should continue hyper optimizing to clear that Programming interview. 
What I can say for sure is that I'll devote a little less time to leetcode, and a little more time to...🤷🏿‍♂️
Hey, that's future Keji's problem, not mine.

🍃 K.
Building my first Command Line Interface. 
Published: 2020-10-25 23:32:12

I have to admit: I'm not nearly as bright as I thought I was. I mean, maybe I am but something about building a command line interface from scratch as your first project in a software engineering bootcamp will have you questioning your own sanity. I am confident in my ability to learn but coding has pushed me through new boundaries. Learning about Ruby objects, control structures, instantiating classes and defining methods was the easy part; having to use all those concepts at the invention level and making a seamless and logical program out of all of it is a whole other dimension. Just when I think I understood a concept, the code returns errors that I spend hours on, but once done, it is the simplest thing on the face of the earth. My greatest challenge has been with building classes: I had taken my time defining its methods and listing the list of attributes that I wanted to use. Then I made sure to create a class variable to save all the instances. I had hit a wall thought because I realized that the array that my API was pushing through my code was empty inside my project when I called it the variable that references it. I had to review all of the code and inserted binding.pry everywhere to finally realize that I was not shovelling the instances inside the class variable. My second biggest challenge is to keep track of my class, variable and method names: it only takes so long before I am completely clueless about which is which when I am chaining methods. I call classes instead of variables and vice versa leading to the code breaking down and me wondering where I went wrong. This experience really thought me how to think a project through and develop good habits and routines as I'm working through it so that I can save a lot of time and energy while avoiding errors that really come down to typos. I also want to point out that no matter how much you try to follow instructions whether from your teacher or website, it is not guaranteed that everything will work for you; working with gems and API thought me that. resourcefulness is of the essence in this endeavor. I had learned how to use a gem called Rest-Client to fetch data from an API and for some reason, no matter what I did, it just wouldn't be accepted in my environment. I couldn't give up, so I searched online for additional gems I could used and came across HTTParty. this gem was a hail mary pass in the completion of my project because it worked perfectly with the API I chose. For all it's worth, coding has made me more attentive to details and I can't wait to learn more about myself and the code in the future.
Week Plan 10/25/2020
Published: 2020-10-25 23:11:55

This is my first blog and I am planning to learn and blog on the below items this week.

- Easy Algorithm Problems
  - https://leetcode.com/problems/two-sum/
     * [Status Done: https://dev.to/thelsk7/two-sum-leet-code-n21]
  - https://leetcode.com/problems/is-subsequence/
     * [Status InProgress: Moved to Next Week]
  - https://leetcode.com/problems/fibonacci-number/
     * [Status InProgress: Moved to Next Week]
- Azure Fundamentals (AZ-900)
  - https://docs.microsoft.com/en-us/learn/paths/explore-microsoft-azure-cloud-concepts/
    * [Status: InProgress 75 % complete] Moved to Next Week
   https://dev.to/thelsk7/az-900-cloud-concepts-azure-fundamentals-1-27hj
https://dev.to/thelsk7/az-900-cloud-concepts-azure-fundamentals-1-27hj
An introduction to Docker - The development and deployment benefits
Published: 2020-10-25 22:49:02

![Docker Logo](https://dev-to-uploads.s3.amazonaws.com/i/macluoc7lvkpvrn4xc4c.png)
# What is Docker? 
Docker is an open source containerization platform. This platform allows developers to package their applications into isolated containers that house all required application software, dependencies and configurations in one neat bundle. This improves the speed at which developers can collaborate on, test, and deploy a piece of software.  Since containers are isolated from one another, users can even have multiple versions of the same software running simultaneously without conflicts.

# Containers


A container is a way to package applications with all required dependencies and configurations.  It is a portable software container that can be easily shared and moved among a development team. Overall they make the development and deployment process much more efficient.

![Container Diagram](https://dev-to-uploads.s3.amazonaws.com/i/7esdqmzabsy77s91w0s5.png)

Since containers are portable, there is a storage system created that holds all containers called the container repository. These repositories can be private or public.  Think of it as a GitHub for docker containers. Many of the public containers are available on https://hub.docker.com/ DockerHub, a resource that stores over 100,000 container images.

# Containers Impact

![Docker Architecture Diagram](https://dev-to-uploads.s3.amazonaws.com/i/uiwymkf5cg4ha129coj8.png)
Containers solve a lot of problems for development.  Instead of setting up each machine identically for the development team to work on the same project (which can differ greatly based on operating system type and revision, and may have many steps that can lead to errors), developers can install the container and be up and running in a matter of a handful of minutes.  The container is its own isolated development environment that houses all necessary dependancies.  In comparison to the traditional installation steps, installation of a docker container is usually one command.

This approach of containers has many implications and simplifications for the deployment process as well.  Traditionally, deployment happened in various steps. The dev team created applications with detailed instructions on how to install the application and configure it.  The application typically also has a database attached to it that also needs detailed instructions for configuration.  These two pieces of the puzzle must be handed off to the deployment team and they must prepare the server environment for the software. Again this may introduce many conflicts or errors due to differences in operating system, dependency versions / revisions, installation steps, etc.  With docker, the teams are joined together and the only configuration needed for the server is the Docker Runtime binaries. The server can pull the container image down and run it much quicker and more reliably than traditional deployment.

In the next entry we will discuss how to get started with creating your own docker container images.
Leetcode: First Unique Char
Tags: javascript
Published: 2020-10-25 22:28:10

#Overview

Today I will be solving the First Uniq Char leetcode challenge. The instructions are as follows. 

Given a string, find the first non-repeating character in it and return its index. If it doesn't exist, return -1.

```
const firstUniqChar = s => {
    // code goes here
};
```

##Step 1

I started off with a for loop to loop through str.

```
const firstUniqChar = str => {
     //
}
```

##Step 2

For each character in the string I get the index of it by using the method ```str.indexOf(i => current index)```. Obviously on the first go round it will be the 0th index. 

##Step 3
I created a if block to check if the letter at index of i has a second appearance within the string by using str.lastIndexOf(i => current index). Within that if conditional ```if str.indexOf(i) is === to str.lastIndexOf(i)```. There might be a chance that there are 4 occurrences of that letter and lastIndexOf doesn't count occurrences. But, it is good enough to find out if at least there is a repeat within the string. 

So going back to the conditional, ```str.indexOf(i) is === to str.lastIndexOf(i)```. If both str.indexOf(i) and str.lastIndexOf(i) are the same indices then we know that, that letter isn't a repeat letter and then we'll return it.

```
if(s.indexOf(s.charAt(i)) === s.lastIndexOf(s.charAt(i))){ 
     return i 
}
```

In the event that there isn't a uniq char then we will just return -1

##All Together

```
const firstUniqChar = s => {
    for(let i = 0; i < s.length; i++){
        if(s.indexOf(s.charAt(i)) === s.lastIndexOf(s.charAt(i))){ 
             return i 
        }
    }
    return -1
};
```
Completed Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-25 07:08:14

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### Introduction
I am a Senior Engineer and technology enthusiastic. I love to solve problems using the software development technologies. Further, I am an Open-source contributor and love to help others in learning.

### Background

I am doing FOSS contribution from 2016. I mainly working with Java related technologies but I have done few projects with JavaScript, Python and C# as well.

### Progress

I started Hacktoberfest from 2017 and continuing it each year. Hope to contribute in coming years too.

### Contributions

1. https://github.com/aditya109/git-osp-for-beginners
I am in a relationship with algorithms. So I thought to contribute to this repository by adding an algorithm.
PR: https://github.com/aditya109/git-osp-for-beginners/pull/112

2. https://github.com/osandadeshan/java-design-patterns-examples
I thought to make a public repo for the design patterns in Java. So it ill be helpful for the new comers.
PR: https://github.com/osandadeshan/java-design-patterns-examples/pull/1

3. https://github.com/osandadeshan/java-design-patterns-examples
Here I am providing an introduction to the repository and the design pattern included there.
PR: https://github.com/osandadeshan/java-design-patterns-examples/pull/2

4. https://github.com/osandadeshan/java-design-patterns-examples
Added a new design pattern to the repository.
PR: https://github.com/osandadeshan/java-design-patterns-examples/pull/3


### Reflections
This is my 3rd Hacktoberfest participation. Each year I learnt a lot from this event and I hope to participate in coming years too.