teleren/devto huggingface dataset:
Keeping your Node.js environment up to date
Published: 2023-01-30 19:46:00

Upgrading a project's NodeJS version from 8.11 to 18.7 was a monumental task that greatly impacted the entire project. To prevent similar issues in the future, it is important to regularly maintain the libraries and the underlying NodeJS engine used.


<img width="100%" style="width:100%" src="https://media.giphy.com/media/TJawtKM6OCKkvwCIqX/giphy.gif">

---
**Regular checking of packages**

<img width="100%" style="width:100%" src="https://media.giphy.com/media/3oz8xMUKstxP1IFJIc/giphy.gif">

Staying on top of updates is key for a successful project. That's why I use the dynamic '[node-modules-browser](https://www.npmjs.com/package/node-modules-browser)' tool to compare my installed library versions to the latest ones. With its user-friendly HTML report and comprehensive library documentation, I'm always up-to-date and ready to tackle any challenge that comes my way.

---
**Keeping packages updated**

<img width="100%" style="width:100%" src="https://media.giphy.com/media/xT5LMskx2CiLPpAkk8/giphy.gif">

I streamline package updates with the handy npx command `npm-check-updates -u --enginesNode`. This command ensures that my libraries are compatible with the specified node version listed in my _npmrc_ file. It's a quick and easy way to keep my packages up-to-date and ready for action.

---
**Testing your application**

<img width="100%" style="width:100%" src="https://media.giphy.com/media/vxDbIL03WXg6f7tu0j/giphy.gif">

Regular maintenance only ensures that libraries and the NodeJS engine are updated and not using outdated versions. End-to-end testing is still necessary to fully verify the effectiveness of the upgrade, as with any other task.

## Disclaimer

![Disclaimer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1pigflg2b7sgjc2uom5.png)
Stand out in interviews: Tips for answering common questions
Tags: javascript, beginners, career, webdev
Published: 2023-01-30 19:44:45

One common pain point for developers in interviews is feeling uncertain about how to answer common questions.
It's natural to feel nervous, but being unprepared can hold you back from landing your dream job.

To help you feel more confident and prepared, it's important to familiarize yourself with common interview questions and think about how you would answer them.
This can help you feel more at ease during the interview and show off your skills and experience.

It can also be helpful to practice answering these questions out loud, either on your own or with a friend or mentor.
This can help you get more comfortable with the process and identify any areas where you may need to improve.

Remember, the more prepared you are, the more confident and at ease you'll feel during your interview.
Don't let the fear of common questions hold you back - take the time to prepare and showcase your skills and experience to the best of your ability.

**1. Tell a story**
When answering questions about your skills and experiences, try to use stories and examples to illustrate your points. This will make you stand out and help the interviewer remember you.

**2. Be specific**
Provide specific examples of your achievements and experiences, rather than just making general statements.

**3. Show your passion**
Make sure that your passion for the industry and the job comes across in your answers. This will help you stand out as a candidate who truly cares about their work.

**4. Ask thoughtful questions**
Use the interview as an opportunity to ask thoughtful questions about the company and the role. This will show that you are interested and engaged in the process.

**5. Be confident**
Confidence is key in an interview. Speak clearly and make eye contact with the interviewer. Confidence will help you stand out and show that you are the right candidate for the job.

**6. Research the company**
Before the interview, research the company and the role to be better prepared. This will help you answer questions with more detail and show that you are genuinely interested in the job.

**7. Be positive**
Maintain a positive attitude and approach throughout the interview. This will show that you are a positive and enthusiastic candidate who is eager to join the team.

I have a FREE PDF with the common interview questions for frontend developers, which you can [download here](https://frontend-interview-guide.alenv.com/freebie).

If you need further guidance feel free to DM me on Instagram at [@alenvarazdinac](https://www.instagram.com/alenvarazdinac/).

Good luck!
Keyoxide Proof
Published: 2023-01-30 18:59:17

Hi there :) I'm https://keyoxide.org/cameron@ctuck.com and this is me adding cryptographic proof that I am the same person here on dev.to!

[Verifying my cryptographic key: openpgp4fpr:135c23b218651a6275ecc71efefdf30a8e3e3078]
Git Cherry Pick
Tags: webdev, git, github
Published: 2023-01-30 18:53:17

`git cherry-pick`

- Check out the branch you want to apply the changes to: git checkout <branch-name>
- Use git log to find the commit hash of the change you want to apply
- Run git cherry-pick <commit-hash> to apply the change to your current branch

For example:
```
$ git checkout my-feature-branch
$ git log
commit ca82a6dff817ec66f44342007202690a93763949
Author: John Doe <johndoe@example.com>
Date:   Mon Mar 5 15:14:15 2021 -0800
```
Add new feature X

```
$ git cherry-pick ca82a6dff817ec66f44342007202690a93763949
```

This will apply the changes from the specified commit to the current branch. If there are any conflicts, Git will prompt you to resolve them before committing the cherry-picked changes.
What does bad code look like?
Published: 2023-01-30 18:40:21

---
canonical_url: https://davidadamojr.com/what-does-bad-code-look-like/
title: What does bad code look like?
description: What does bad code look like? It may be more interesting to think about bad code in terms of what it feels like.
---
What does bad code look like? Well, code that does not do what it should is probably bad by default. Not much else to say about this one.

Beyond that, it is probably easier and more interesting to think of bad code in terms of what it feels like. Most of the bad code I've seen tends to fall into one of three categories.

## Easy to understand, difficult to change

Working with this kind of code initially feels pleasant, but could quickly devolve into a terrifying and never-ending game of Jenga. Code like this is common among new programmers and could actually be useful in some contexts. In search of growth and perfection, too many software engineers eventually lose their tactical ability to write this kind of "bad" code.

## Difficult to understand, but easy to change once you get around to understanding it

Working with this kind of code feels like a constantly swirling mix of confusion, surprise, and sudden enlightenment. This kind of code is common among experienced software engineers who have their heads full of useful principles, design patterns, and other "best practices". I've had to fight my way out of writing this kind of code more times than I can count.

## Difficult to understand, difficult to change

This is just the worst! Avoid like the plague.

This kind of code feels like a terrifying nightmare that continues when you wake up and when you go back to sleep. I'm not sure how one ends up here, but this is certainly not what you want your code to feel like for anyone who touches it.

You'll probably end up with this kind of code when you apply design patterns, design principles, programming paradigms, and/or complex architectures without understanding why these things exist and when to use them.

---

One of the most elusive aspects of your job as a software engineer is to figure out how to produce code that is both easy to change and easy to understand. Producing such code is not easy, but it is typically the best way to build software that retains its value over time.
Run Docker with GitHub Actions
Tags: docker, github
Published: 2023-01-30 18:32:39

Docker is a popular platform for developing, deploying, and running applications in containers. GitHub Actions is a powerful platform for automating software workflows, including continuous integration and continuous delivery (CI/CD) processes. 

1. Start by creating a GitHub Actions workflow in your repository. You can do this by creating a new file in the ".github/workflows" directory
2. Define the steps for your workflow. Here's an example of a basic workflow that builds and pushes a Docker image to a registry

```
name: Docker CI/CD

on:
  push:
    branches: [ main ]

env:
  DOCKER_REGISTRY: docker.io
  DOCKER_IMAGE: yourusername/yourimage

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v2

    - name: Build Docker Image
      uses: docker/build-push-action@v2
      with:
        context: .
        push: true
        tags: ${{ env.DOCKER_REGISTRY }}/${{ env.DOCKER_IMAGE }}:${{ env.TAG_NAME }}

```

3. In this example, the workflow is triggered on pushes to the "main" branch of your repository. The environment variables "DOCKER_REGISTRY" and "DOCKER_IMAGE" are used to specify the Docker registry and image name, respectively.
3. The "Checkout code" step uses the checkout action provided by GitHub Actions to check out the code in your repository.
 
4. The "Build Docker Image" step uses the Docker CLI action to build and push the Docker image to the specified Docker registry. The "context" parameter specifies the build context, which is the current directory in this case. The "push" parameter is set to "true" to indicate that the image should be pushed to the registry.

5. Test your workflow by pushing a change to your repository and check the Actions tab to see if your workflow is executed successfully.
Como conectar ChatGPT a internet
Tags: chatgpt, gpt3, openai, spanish
Published: 2023-01-30 18:32:31


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1dydeqrf5gnd7rbudus.jpg)
ChatGPT está arrasando en todo el mundo. Ha logrado de hecho un millón de usuarios en menos de una semana. Algo que no ha logrado Instagram o Spotify, ni ninguna otra aplicación...

Una de las quejas que tienen los usuarios de ChatGPT es que aún no se ha contectado a la red, es decir, cuando lo usamos, solo nos puede responder sobre hechos ocurrido antes de hace un tiempo, no conoce nada de la actualidad y por tanto no peude generar contenido relacionado con sucesos recientes o con aplicaciones que acaben de salir, etc.

Pero eso tiene solución, una de las empresas que integran ChatGPT o GPT3, no estoy seguro cual de los dos integra, ha sacado "AI Chat" que no es más que un chat donde conecta la IA de OpenAI a internet, tampoco sé a que buscador lo conecta, el caso es podremos usarlo para tener acceso por fin a la IA de OpenAI conectada a la red...

Os dejo la review que he escrito sobre ChatGPT:
[https://yourgeekweb.com/es/2023/01/30/opinion-analisis-y-review-sobre-writesonic-el-programa-que-genera-texto/](https://yourgeekweb.com/es/2023/01/30/opinion-analisis-y-review-sobre-writesonic-el-programa-que-genera-texto/)
Laravel Soft Delete
Published: 2023-01-30 18:30:10

Soft Delete is an extension to the Eloquent ORM in the Laravel framework. It allows models to be deleted without permanently deleting them from the database. Instead of deleting a record, it adds a deleted_at timestamp to the record. This allows you to easily restore the record by removing the timestamp.

Soft Deletes can be used on any Eloquent model in the Laravel framework. To enable the functionality, you must add the SoftDeletes trait to the model and add a deleted_at column to the table.

The SoftDeletes trait provides a few methods such as delete() and restore() to delete and restore records. It also provides the onlyTrashed(), withTrashed(), and onlySoftDeleted() methods to filter out records based on their deleted status.

Soft deletes are useful for situations where records need to be kept in the database but hidden from users. For example, you may want to keep deleted comments in the database in case they are needed later, but not have them show up in the front-end.

[Laravel Add Soft Delete to Existing Table](https://coderapidly.com/laravel-add-soft-delete-to-existing-table)
Get More Work Done Faster with These AI Tools for Chrome
Tags: webdev, beginners, productivity, javascript
Published: 2023-01-30 18:28:25

If you're looking for ways to boost your productivity and get more done in less time, you've come to the right place! In today's fast-paced world, it's more important than ever to be able to work efficiently and effectively. That's why we've compiled a list of the best AI tools for Chrome that can help you get more work done faster. These innovative tools use artificial intelligence to automate repetitive tasks, streamline your workflow, and free up your time to focus on more important work. So if you're ready to revolutionize your workday and get more done in less time, read on to discover the top AI tools for Chrome!

---

## [1. ScribeHow](https://getscribe.how/chrome)

- Turn any process into a step-by-step guide, instantly.

- You don't need to explain the process manually. Just record it, and the ScribeHow extension will convert it into a guide.

![ScribeHow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2404dgqts7ydt8j23noe.png)

---


## [2. Otter]( https://otter.ai)

- Transcribe and caption Google Meet in real-time, and add meeting notes in Google Calendar.


![Otter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/djmr4avl2tbsjndwx0c9.jpeg)

---


## [3. HyperWrite](https://hyperwriteai.com)

- HyperWrite helps you write with confidence and get your work done faster from idea to final draft.

![Hyperwrite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bequusc163fjqsmhtix.jpeg)


---


## [4. Compose AI](https://compose.ai)

- Compose AI is a Chrome extension that cuts your writing time by 40% with AI-powered autocompletion & text generation.


![compose.ai](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yw6ib6zkyuqi6kvkmzn5.jpeg)

---
In conclusion, these AI tools for Chrome are a game-changer when it comes to boosting productivity and getting more work done in less time. Whether you're a busy professional, student, or anyone looking to streamline their workflow, these tools are a must-have. With their innovative AI technology, you can easily automate repetitive tasks, manage your to-do list, and stay on top of your work.

We hope you found this article helpful and that you're now inspired to try out some of these AI tools for yourself. If you'd like to stay updated with the latest tech news and tips, be sure to follow us on **[Twitter](https://twitter.com/RahulBagal3002)** and **[Dev.to](@rahul3002 )**. We're always sharing the latest trends and innovations, and we'd love to connect with you. So why wait? Start getting more work done faster with these AI tools for Chrome today!
colo - 256 terminal colors in almost all formats
Tags: terminal, python
Published: 2023-01-30 18:22:17

I spend most of my time in the terminal. Colorizing things makes detecting important pieces of information faster and more efficient in the terminal.<br>
Colo is a little script that helps with choosing colors for the terminal applications. It can output the colors in different formats, rgb,numbers, hex, hsi so one can quickly choose the colors that one wants to use.<br>
{% embed https://github.com/terminaldweller/colo %}
I wrote it to make my life in the terminal easier.<br>
I guess the "feature" that colo has is that supports printing the colors in different formats and I can get it with a simple `pip install colo` on a new machine/vm/container.<br>
Hope someone else finds it useful.<br>
How to Send Data while Navigating Back in React Native
Tags: reactnative, javascript, mobile, react
Published: 2023-01-30 18:20:20

It is one of the most common issues in Mobile apps in React Native. We can send data from ScreenA to ScreenB in params but can't send data from ScreenB to ScreenA while navigating back!

## But I have got a Hack!
In this blog, I am gonna tell you how to send data from ScreenB to ScreenA while navigating back.

### Let's start by making Screen A

In ScreeA, I created a button to navigate to ScreenB with no data.

![ScreenA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/313fm0friki5fs9ocozz.png)

### Setting up Screen B
Now in ScreenB let's make a similar button for going back, but instead of using `navigation.goBack()` we will use `navigation.navigate()` here.
<br></br>
> 
**Reason** - In `navigation.navigate()` function, If the given path is present in the navigation tree, it will navigate to that path instead of creating a new one, else It will create a new path.

<br></br>
And as we know, ScreenA was already there in our navigation tree so `navigation.navigate()` will move to ScreenA which is technically our previous screen.

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

Now you might notice here, that the arguments are different from regular ones. Let me explain-

- **name** - Screen/Route Name
- **data** - data to be passed in routes
- **merge** -
 true if you want to merge the data with the given screen.

With this, we can **send data to ScreenA**.

## How to handle the new data in Screen A?
When we initialised the screen we didn’t mention any routes params data because there weren't any!
So how are we going to handle this new data in Screen A?


![Code to handle data from ScreenB to ScreenA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vj593v4gqhgkq93vxzrv.png)

In ScreenA we will place a useEffect for new route data with a " ? " to check if the data key exists. Initially, the data key wouldn’t exist hence it will do nothing, but after navigating back from ScreenB it will get engaged and log the new data.

Basically we are forcing new route data into our ScreenA.

And POOF, we have our data from ScreenB!



**Thanks for Reading !**
Laravel 9 Sanctum
Published: 2023-01-30 18:19:44

Laravel 9 Sanctum is a package designed to provide authentication for Single Page Applications (SPAs), mobile applications, and other types of applications. It is a lightweight authentication system that is integrated with the Laravel framework.

Sanctum is built on the same security principles as [Laravel authentication system](https://coderapidly.com/laravel-9-rest-api-authentication-using-sanctum), and it provides a simple API for authentication and authorization. It includes built-in support for stateless authentication and token-based authentication, and it makes it easy to add additional authentication methods.

Sanctum also provides a simple API for managing tokens, and it makes it easy to manage user sessions. It is also possible to add additional authorization layers to Sanctum, such as roles and permissions, that can be used to control access to specific endpoints.

Sanctum is an ideal solution for developers who are building SPAs, mobile apps, or other types of applications that need a secure authentication system.

**Laravel 9 Sanctum advantages**

Improved security: Sanctum provides improved security by allowing users to authenticate via multiple methods, including OAuth, API tokens, and personal access tokens. This means that users can securely access your application with a wide variety of authentication methods.

Easy integration: Sanctum makes it easy to integrate with your existing authentication system. It is designed to work with Laravel’s authentication system, allowing you to quickly and easily add authentication to your application.

Cross-platform support: Sanctum works across multiple platforms, including web, iOS, and Android. This means that you can use Sanctum to authenticate users on all of your applications.

Improved scalability: Sanctum is designed to scale with your application, allowing you to easily add additional authentication methods as your user base expands.

User-friendly API: Sanctum’s API is easy to use and understand, making it quick and easy to add authentication to your application. Additionally, the API allows you to customize the authentication process to meet your specific needs.

[Laravel 9 REST API Authentication Example using Sanctum](https://coderapidly.com/laravel-9-rest-api-authentication-using-sanctum)
Objects In Javascript
Tags: beginners, javascript, codenewbie, programming
Published: 2023-01-27 13:06:40

### OBJECTS AND OBJECT METHODS IN JAVASCRIPT
An object is a non-primitive data type that allows one to store a collection of multiple data. Objects are also variables that contain many different values. In Javascript objects are different from other programming languages since you don’t have to create classes first.

**How to create objects in JavaScript**
  const objectName = {
         property1:value1,
         property2:value2,
        }
An example is;
```javascript
    const resident= {
    name: “Bashenga”,
    age: 30, };
  console.log(person);  //output==(name: ‘Bashenga’ , age: 20)
```
In this example, a new object ‘resident’ has been created. ‘name’ and ‘age’ are the properties that belong to the object while ‘Bashenga’ and ‘30’ are the values that have been assigned to it.

**Accessing object properties**
There are two ways of accessing object properties ie;

**Using dot notation**
The syntax for accessing properties using dot notation is objectName.key
   e.g using the previous example;
     console.log(resident.name);        //output== ‘Bashenga’

**Using Bracket notation**
The syntax used is objectName[“propertyName”]; e.g,
  Console.log(resident (“name”));       //output== ‘Bashenga’

**Object Methods in Javascript**
A method is an object property that has a function value. They can also be referred to as actions that can be performed on an object. Methods are stored as properties.
example:
```javascript 
   const resident= {
   name: “Bashenga”, 
   age: 30,
   greet:function () {console.log(‘Hello’)};}//the ‘greet’ property contains a function value.
```
Above is an object containing a method.

**Accessing Object methods**
Methods can also be accessed using the dot notation way, ie; objectName.methodName()
    Eg using the previous example
              resident.greet()     //output== hello
If you try to access the method without including the brackets () ,it will give a function definition instead.
    Eg   resident.greet          //output== function() {console.log(‘Hello’)}

**Adding a Method to an Object**
Example; 
```javascript  
     Let resident = {};
     resident.name= “Bashenga”;     //adding a property
     resident.greet= function() {console.log (“hello”) }; //adding a method
```
In the above example, an object named ‘resident’ has been created then the ‘greet’ method was added to it.
You can use this method to add methods (or properties) to objects.

**The ‘this’ keyword**
The ‘this’ keyword is used to access properties of an object within the method of the same object. 
This is the syntax used:  this.propertyName
Eg 
```javascript 
   const resident= {
   name: ‘Bashenga’,
   age: 30,
   greet: function(){console.log(‘The name is’ + ‘  ‘ + this.name)};
}; // output== The name is Bashenga
```
Responsive Text - Without @media queries
Tags: css, webdev, beginners, html
Published: 2023-01-30 18:02:39

Once upon a time, I had a website where it looked great on laptop, but when I switched to phone, the text was **SO TINY!!!**.

---

So I started messing around with `@media` queries and found them a bit too hard to use.

---

Then I searched my problem in Google and found [this StackOverflow post](https://stackoverflow.com/questions/15649244/responsive-font-size-in-css).
It had the answer to my problem!

---

The answer is pretty simple actually. You use the `calc()` function in CSS, and use `rem` and `vmin` units to write this code:
```css
body {
  font-size: calc(0.75em + 1vmin);
}
```

---

I made responsive text with just 3 lines of CSS and without `@media` queries!