teleren/devto huggingface dataset:
Empleos en Data y Analytics LATAM — Feb 2022 - II
Published: 2022-02-16 18:48:01

Te compartimos las ofertas laborales del mes para áreas de Data, Analytics y Cloud 👨‍💻👩‍💻.

✅[Data Analyst- Ericsson (Perú, Lima)]
(https://pe.indeed.com/viewjob?jk=056c9a842439219a&tk=1fs1tcrchu218802&from=serp&vjs=3)
✅[Data Engineer- Crehana (Colombia, Bogotá)]
(https://co.indeed.com/viewjob?jk=90bfb32c1c7a767a&tk=1fs1te9vi3o81001&from=serp&vjs=3)
✅[Data Scientist - Globant (Ecuador, Guayaquil)]
(https://ec.indeed.com/viewjob?jk=6fe17a52d9d409f2&tk=1fs1tg1eeu1vl800&from=serp&vjs=3)
✅[Machine Learning Analyst - YOM Mercado (Chile, Santiago de Chile)]
(https://cl.indeed.com/ver-empleo?cmp=YOM&t=Product+data+analyst&jk=68a0e92f305a860e&q=Machine+Learning&vjs=3)
✅[Data Analyst - Emerson (Mexico, Ciudad de México)]
(https://mx.indeed.com/viewjob?jk=aeb08f3da6ba23d2&tk=1fs1tjsp7jp13800&from=serp&vjs=3)
✅[Data Engineer- SparkDigital (Bolivia, Santa Cruz)]
(https://www.linkedin.com/jobs/view/2779365226/?eBP=NotAvailableFromMidTier&recommendedFlavor=ACTIVELY_HIRING_COMPANY&refId=VUPKWeD8lQeubVaeqnSuGg%3D%3D&trackingId=hGtjfW5zBWGDGX31mUR4Eg%3D%3D&trk=flagship3_search_srp_jobs)
✅[Data Scientist - JPMorgan Chase Bank, N.A. (Argentina, Buenos Aires)]
(https://ar.indeed.com/viewjob?jk=24e08c7b3aa06e3a&tk=1fs1tnauqianv800&from=serp&vjs=3)
✅[Machine Learning Analyst - FullStack Labs (Venezuela, Caracas)]
(https://ve.indeed.com/viewjob?jk=565116ddcf9bb974&tk=1fs1tojnbu1ul802&from=serp&vjs=3)


Aprende, aplica y crece en proyectos de Data y Analytics en Cloud.

Visita nuestra página:
👉🌐 datahack.la
Best way to break tag in HTML
Tags: webdev, opensource, webmonetization, html
Published: 2022-02-16 18:23:05

## Introduction😀
Once upon a time... 😂 No worry guys, I won't narrate a boring story. For each and everyone going into the web development journey, the best roadmap should include HTML as the primary item.
<center>
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645028877821/1HudxND-c.png) 
</center>

## What is HTML?🤔
HTML in its full form, Hypertext Markup Language is the basic language when it comes to web development. Officially released in the 90s and nowadays we are up to version 5 (HTML 5). HTML is mainly for web formating and creating pages that are displayed on the world wide web.
<center>
![](https://mir-s3-cdn-cf.behance.net/project_modules/disp/33af2611811329.56252ce76a273.gif)
</center>

## Transitioning through HTML versions
<center>
![html-trans.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1645030605202/SBc8t1Ff2.gif)
</center>
Going through Html versions we have versions 4 and 5 as trending nowadays.
### Main differences between HTML 4 and 5
<center>
![html4-vs-5.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645030927866/CvmVoQ1by.png)
</center>

The main differences are as seen in the image above. Last but not least is the Doctype tag at the beginning of HTML5 pages.<br><br>
**HTML5 Structure**
```
<!DOCTYPE html>
<html>
        <head>
             <title>HTML5 basic structure.</title>
       </head>
       <body>
             <header> </header>
             </header>
             <nav> </nav>
             <article> </article>
            <footer> </footer>
      </body>
</html>
```
**HTML4 Structure**
```
<html>
       <head>
             <title>HTML5 basic structure.</title>
       </head>
       <body>
             <div class="header"> </div>
             <div id="new"> </div>
      </body>
 </html>
```
## Difference between `<br>`, `<br/>` or `<br />`
Let's work on this to reduce our items to be differentiated to 2. As concerned with `<br/>` and `<br\>` they are the same representation just the gap which has a minor effect on the code output.<br>
### `<br>`  🆚  `<br />`
1. **Main Language of use** :<br>
In XML(Extended Markup Language) all tags can be self-enclosed like this `<tag-name \>`. That being said `<br \>` is the syntax for break statement in XHTML and XML.
<center>
![image.png](https://techdifferences.com/wp-content/uploads/2018/06/XML-vs-HTML.png)
</center>

2. **HTML Versions**:<br>
In HTML earlier versions `<br>` was not used instead the break statement in use was the borrowed break `<br />` from XML.
<center>
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645033102476/nEj7eiq_r.png)
</center>
3. **Compatibility**:
Some browsers interpret the `<br>` and `<br />` in different manners.
<center>
![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1645033499868/C3c9vbIu9.png)
</center>
## Conclusion
Before jumping into or going deeper into your web dev journey, revise all the new features and special tags that are always coming up.
Docker - YouTube Course
Tags: docker, javascript, beginners, programming
Published: 2022-02-16 18:01:38

Container - is an isolated environment for running an application

!==

Virtual Machine - is an abstraction of a machine (physical hardware) - Hypervisors

------------------------------------------------
Installing Docker - the lattest version

```
docker version
```

------------------------------------------------
Dockerfile - is a file that include instructions packge a image (contains everything that application needs to run)

Container - Is just a process then use that image.
Docker run inside a container an isolated environment

-----------------------------------------------
Docker in action
Starting up a new Vue 3 project with Vite and Docker
Tags: vue, vite, javascript, docker
Published: 2022-02-16 17:50:54

I'm enjoying new Vue 3 script setup syntax and blazing fast hot-reload using Vite.
And as I'm using Docker containers for my development environment here are the few steps needed to start a new Vue 3 project with Vite under the Docker.

## Docker

docker-compose.yml
```yaml
version: "3.4"
services:
  my_frontend:
    container_name: my_frontend
    image: node:lts
    working_dir: /var/www/html/app/
    entrypoint: /bin/bash
    expose:
      - 8000
    volumes:
      - ./frontend/:/var/www/html/app
    tty: true
```
This is simple. Just using the `node:lts` image and setting some stuff around.  
I'm spinning the container up with:
`$ docker compose up -d`
and hooking into the container with:
`$ docker exec -it my_frontend /bin/bash`

## New Vue Project
When in the docker container, create a new Vite with Vue project:
`$ npm init @vitejs/app`
Then select the Vue, name the project and so on.
After the project is generated, install the packages.

## Setting up the Project for running under the Docker
For running the project under the Docker there are some adjustments that need to be done in the Vue/Vite project.

At first the port must be set to match the one in the `docker-compose.yml` file (in my case it is 8000).

Open the `vite.config.js` file and add the server object with the port field to the configuration:

```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  server: {    // <-- this object is added
    port: 8000
  },
  plugins: [vue()]
})
```
We must also add parameter `--host` to the `vite` command in the `package.json`, so replace `dev` command in `scripts`:
```json
// package.json
...
"scripts": {
    "dev": "vite",
...
```
with:
```json
// package.json
...
"scripts": {
    "dev": "vite --host",
...
```

**And that's it!**
How to move your .ssh generated keys to a new laptop.
Tags: unix, devops, ssh, sre
Published: 2022-02-16 17:44:41

So I recently changed laptops, from being a Linux user for the past 2.5 years. I was running Parrot during that time, great os by the way if you are into cyber security stuff or just another full-stack developer like me.

I switch over to Mac, and all my ssh keys were in my previous laptop, they access all of my servers in Digital Ocean and AWS, to cloning and pushing to Github and so much more. I could not convince myself to update all servers with the new ssh keys and I had some issues with Github SSH cloning. So here are the steps I took, enabling me to move all my keys to my new laptop.

- Copy over the ssh keys from your old laptop to the new one, they should be located in the ~/.ssh/ folder. You can use a flash drive or a cloud platform, whatever works for you.
- Paste the files in your new laptop in the same directory.
- Add the to your keychain
```bash
# for macos
ssh-add --apple-use-keychain ~/.ssh/id_rsa

# for linux
ssh-add -K ~/.ssh/id_rsa
```
- The Catch: If you do that you will get an error like this:
```bash
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0664 for 'id_rsa' are too open.
It is required that your private key files are NOT accessible by others.
This private key will be ignored.
```

- To avoid this, run this command;
```bash
# this basically makes the keys read-writable by you
chmod 600 id_rsa
```

- Retry adding it to the keychain
```bash
# for macos
ssh-add --apple-use-keychain ~/.ssh/id_rsa

# for linux
ssh-add -K ~/.ssh/id_rsa
```
- The output should be:
```bash
Identity added: id_rsa (<ssh_name_will_appear_here)
```
Day-8 Training at cognizant
Published: 2022-02-16 17:38:54

- Date:16/02/2022
- Day:Wednesday

Today I started at about 9:00 am and firstly I attended the heartfelt soul session they taught us basics of mediation.And after this there was doubt session that was based upon course provided by my instructor and latter I attended the leadership session in which a lady having 25 years of experience with cognizant discussed all the difficulties and all upcoming opportunities to all tranies so, this way day ended .
Prune and Mass Prune Models  - Laravel
Tags: laravel, php, webdev, programming
Published: 2022-02-16 17:28:53

Let's learn this wonderful feature. You found this wonderful resource https://www.youtube.com/watch?v=557_IL3d9V8 Let's assume that you have some old recordings that you want to delete from the database. Here comes this feature.
First we go to the Model in which we want to implement this feature and `` use Prunable ``
```php
<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Prunable;
 
class Flight extends Model
{
    use Prunable;
 
    public function prunable()
    {
        return static::where('created_at', '<=', now()->subMonth())->whereNull('email_verified_at');
    }
}
```
After that it is possible to use command
```php
php artisan model:prune
```
Here we see the pruning function and when I use it in the Model, we explain what we want to do after deleting the records
```php
protected function pruning()
{
    echo 'Pruning ' . $this->name . PHP_EOL;
}
```
We also use the schedule to execute a command every certain period, which makes more sense in your future projects
```php
protected function schedule(Schedule $schedule)
{
    $schedule->command('model:prune')->daily();
}
```
Let's move to Mass Pruning, which deletes records once, but there is a flaw in it nor will the deleting and deleted model events be dispatched. This is because the models are never actually retrieved before deletion, thus making the pruning process much more efficient Here we `` use MassPrunable ``
```php
<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\MassPrunable;
 
class Flight extends Model
{
    use MassPrunable;

    public function prunable()
    {
        return static::where('created_at', '<=', now()->subMonth());
    }
}
```


I hope you enjoyed the code as much as I enjoyed sharing it with you. To dig deeper, visit these resources 
https://laravel.com/docs/8.x/eloquent#pruning-models
https://laravel.com/docs/8.x/eloquent#mass-pruning
https://hbakouane.medium.com/models-pruning-in-laravel-8-50-0-explained-8fad5017f9b0
Day-25 Training at Ryaz
Tags: javascript, beginners, node, github
Published: 2022-02-16 17:26:48

- Date:16/02/2022
- Day:Wednesday

Today I started at about 10:20 am today my aim was to complete the CRUD app all operations like to create, display data, update data, delete data so, I was done with building all routers, controllers, module as I was to do .then main part left over was to test with an postman api's so, firstly I installed postman then saw some video on youtube how to configure it so after this I was able to understand that how to send different post, put,get,delete request from postman so, further I tested all these operations they were working well but only problem I faced was the request sent and data stored in data base is in form of encrypted form so if I see the data base I cannot resemble the data that I posted or deleted so I wish it is a problem somewhere or I had to do some necessary changes to probhit this action so after this is resolved I am left over to set up user, host and give them various privileges to handle this all. so, this way my day ended up and I got to learn new things like to configure and work with postman.
1 line of code: How to truncate a string at word boundaries
Tags: javascript, webdev, productivity, codequality
Published: 2022-02-16 17:18:10

```javascript
const truncateAfterWord = (str, chars, placeholder = '…') =>  str.length < chars ? str : `${str.substr( 0, str.substr(0, chars - placeholder.length).lastIndexOf(" "))}${placeholder}`;
```
Returns the string truncated to the given amount of chars while preserving full words.

---

## The repository & npm package

You can find the all the utility functions from this series at [github.com/martinkr/onelinecode](https://github.com/martinkr/onelinecode)
The library is also published to [npm as @onelinecode](https://www.npmjs.com/package/@onelinecode/onelinecode) for your convenience.

The code and the npm package will be updated every time I publish a new article.

---

Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)

Photo by [zoo_monkey](https://unsplash.com/@zoo_monkey) on [Unsplash](https://unsplash.com/s/photos/fuji)

---

[![Subscribe to the weekly modern frontend development newsletter](https://modernfrontend.dev/banner/banner_583-111.png)](https://modernfrontend.dev/)

---
10 GitHub repos you cannot miss out on
Tags: github, javascript, webdev, beginners
Published: 2022-02-16 17:05:58

What is a repository?

Basically a repo is short for repository. A repository is like a container, it stores your files. It is stored with a history of changes you've made. If you don't get what a repo is storing or its purpose, you can read the repo's README.md file.

Here are 10 repositories you need to check out right now!

## 1. [ossu/computer-science](https://github.com/ossu/computer-science)

![one](https://i.imgur.com/EN2Ma40.png)

The OSSU curriculum is a complete education in computer science using online materials

## 2. [public-apis/public-apis](https://github.com/public-apis/public-apis)

![two](https://i.imgur.com/jprynG1.png)

A nice and frequently updated collection of public apis. The APIs are even broken down into categories making it much easier to browse through them.

## 3. [swisskyrepo/PayloadsAllTheThings](https://github.com/swisskyrepo/PayloadsAllTheThings)

![three](https://i.imgur.com/pHnwaCo.png)

This repository is a list of useful payloads and bypasses for Web Application security

## 4. [EbookFoundation/free-programming-books](https://github.com/EbookFoundation/free-programming-books)

![four](https://i.imgur.com/Nt58XPO.png)

In this repository, you can get various free books related to various programming topics.

## 5. [freeCodeCamp](https://github.com/freeCodeCamp/freeCodeCamp)

![five](https://i.imgur.com/TlbD87m.png)

FreeCodeCamp is a great place to get started with programming. On youtube, their website and even Github.

## 6. [jwsham/coding-interview-university](https://github.com/jwasham/coding-interview-university)

![six](https://i.imgur.com/4Z0Seqd.png)

"Googley-as-heck" created this repository to document his 8-month process of preparing for a Google Interview. And you can spend less time thanks to this repo.

## 7. [danistefanovic/build-your-own-x](https://github.com/danistefanovic/build-your-own-x)

![seven](https://i.imgur.com/21YCDNq.png)

This is a great repository that teaches you how to build your own tech like an AR bot, BitTorrent, bot and many more.

## 8. [trekhleb/javascript-algorithms](https://github.com/trekhleb/javascript-algorithms)

![eight](https://i.imgur.com/VFHaxyE.png)

This repository contains algorithms and data structures implemented in JavaScript with explanations and links to further readings.

## 9. [vasanthk/how-web-works](https://github.com/vasanthk/how-web-works)

![nine](https://i.imgur.com/GxnzD8s.png)

What happens behind the scenes when we type www.google.com in a browser?

## 10. [kamranahmedse/developer-roadmap](https://github.com/kamranahmedse/developer-roadmap)

![ten](https://i.imgur.com/QSgv6rV.png)

This repo contains roadmaps for popular languages to learn and become a developer in 2022

### Thank you for reading

If you liked this post, subscribe to my [newsletter](https://abhirajbhowmick.substack.com) to never miss out on my blogs, product launches, and tech news, and follow me on [Twitter](https://twitter.com/rainboestrykr) for daily threads on web dev resources.
Filter on map function in React JS
Tags: javascript, html, react, programming
Published: 2022-02-16 16:50:05

Hello Guys Today i am going to show you how you can apply filter on map function.

So why i have to use filter method on map function well here is the problem i faced 

```javascript
<div>
   {props.list.map((item) => {
      return (
         <div key={item._id}>
           <div>
             <h1>Username - {item.username}</h1>
             <h1>Email - {item.email}</h1>
             <h1>Password - {item.password}</h1>
           </div>
           <div>
            <button
               onClick={(e) => {
                 updateUser(item._id);
                }} >
              Update          
            </button>
        </div>
       );
     })}
```

### The problem i was facing is i have attached a button to update elements , i want to get the element id of that particular element which i want to update , here comes the filter method to rescue

```javascript
...
  const [updateId, setUpdateId] = useState("");
  const [updateEmail, setUpdateEmail] = useState("");
  const [updateUsername, setUpdateUsername] = useState("");
  const [updatePassword, setUpdatePassword] = useState("");

  const updateUser = (id) => {
    const filtered = list.filter((user) => user._id === id);
    setUpdateId(filtered[0]._id);
    setUpdateEmail(filtered[0].email);
    setUpdateUsername(filtered[0].username);
    setUpdatePassword(filtered[0].password);
  };

 
...
```

## Explaination
* Here i have created a state called "updatedId" which will store the id of the element which i want to update.
* Then i created an arrow function "updatedUser" with parameter "id" this is the unique id which we will pass using our update button onClick method.
* Then we created a filter which returns the single user by comparing it to the id we have passed to the function if the id is present in the list.
* Then we set the updatedId using "setUpdatedId(filtered[0]._id)", what it means the "filtered" is an array with only one element and "filtered[0]._id" means we are getting the id of that element and provide it to the "updatedId" state , now using this unique id ,we can update the user information by passing this id to the backend.

* Also we have used "filtered[0].username","filtered[0].email" and "filtered[0].password",this will take the email, username and password assigned to that used id.


Thats it for this post.
THANK YOU FOR READING THIS POST AND IF YOU FIND ANY MISTAKE OR WANTS TO GIVE ANY SUGGESTION , PLEASE MENTION IT IN THE COMMENT SECTION.
^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well

https://dev.to/shubhamtiwari909/how-to-push-code-to-github-remote-respository-ifh

https://dev.to/shubhamtiwari909/styled-componenets-react-js-15kk

https://dev.to/shubhamtiwari909/introduction-to-tailwind-best-css-framework-1gdj
Would you like an OpenSource Engineering Handbook Template ? 🚀
Tags: opensource, githunt, devops, devrel
Published: 2022-02-16 16:42:24

Launching 🚀

**🔥 - An OpenSource Engineering Handbook Template for Engineering Teams who want to go further, faster 🚀**

**<u>[Github Repo Link](https://github.com/ghostinthewires/Engineering-Handbook)</u>** ⭐

Creating an Engineering Handbook Website from scratch is time-consuming and that's why I have created an OpenSource Engineering Handbook Website Template so Engineering Managers don't have to build their website from scratch. 💯

Instead, Engineering Managers can focus on building better Engineering Teams without worrying about the Engineering Handbook Website itself. 🤘

**Features:**

* Easy to Setup ✅
* Free to Use ( OpenSource ) ✅
* Fully Responsive ✅
* Super Fast and Optimized for SEO ✅

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

The project is made with **HTML**, **CSS**, some **JavaScript**, and **Jekyll**. Don't worry if you don't know any, I have provided the instructions on how to use the template and set up your own Engineering Handbook in the **README.md** file inside the Github Repository.
 

* Check out the [Github Repository](https://github.com/ghostinthewires/Engineering-Handbook) 👨‍💻
* Drop a Github Star ⭐ 😉
* Fork the Repository 🍴
* Start using it for your own Engineering Handbook 🙌

The **[Demo Link](https://ghostinthewires.github.io/Engineering-Handbook/)** of the template shows you what it will look like ✅

Hope this Engineering Handbook Template will help you in your journey as an Engineering Manager / Developer 😇

**Important** 😸

I regularly post useful content related to Azure, DevOps and Engineering on Twitter. You should consider following me on [Twitter](https://twitter.com/GhostInTheWire5)
Why programming is very hard at the beginning?
Tags: programming, beginners, webdev
Published: 2022-02-16 16:38:44

The one thing that all programmers agreed is the programming is very hard at the beginning, but we need to ask our self the question: why programming is very hard at the beginning?

The simple and reasonable answer for that question is: Everything you didn't try before is very hard at the beginning, and if you ask why is that? I will say that is  our nature.

When we was babies, we struggled to walk because we didnot born walking, and we didnot tried to walk until we needed that, then we tried to walk and it was very hard, but we insisted to walk then finaly walking became easy to us, so if you look very closely you will find out everything in our life looks just like that.

Everything is hard at the beginning not only programming because at the beginning we don't have the mindset of what we are dealing with, so we will feel hard, fear and so on, and that's exactly what we must feel.

If you don't feel hard or fear or something like that when you beginning new thing, that means the new thing you are beginning is not new, its something that you already knew or tried.

> If you already knew something you don't need to be worried or feel hard about that thing, that's how our brain works.

So the next time you are going to begin or try new thing remember yourself the thing you are going to begin is much harder than you think, and maybe in that case it may become easier.