teleren/devto huggingface dataset:
My favorite development environment: VS Code on Mac + Ubuntu SSH + Podman
Published: 2020-12-31 01:35:01

---
title: My favorite development environment: VS Code on Mac + Ubuntu SSH + Podman
published: true
description: My favorite development environment: VS Code on Mac + Ubuntu SSH + Podman
tags: 
//cover_image: https://direct_url_to_image.jpg
---
I work on Open Source projects that use containers and Kubernetes heavily. I used to run docker locally on my Mac and use [Skaffold](https://skaffold.dev/) for testing/deploying on a cluster. It all worked great, but every now and then Docker would rev up my Mac ✈️. 

I had heard of [Podman](https://podman.io/), a daemonless container engine on Linux, and wanted to give it a try. I installed [Ubuntu Desktop 20.04](https://ubuntu.com/download/desktop) on my 2013 Mac Mini.  Podman is amazing to use and meets all my needs, without making a fuss (literally). 

I even got it working on my 1GB raspberry pi without any problems. Now, I can remote into the Ubuntu box from VS Code itself as you can see here:

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

You give it your username@IP and you are good to go!

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

I copied over my ssh key to the server so it does not ask for a password anymore.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/242hlsewjfq2us2woirj.png)

I am even able to open the remote folders and it seems like I am working on my Mac:

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

I can happily use podman from my Mac and it runs very quietly. I love it 💕

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pi1s0rrn9w65mjx1w1gm.png)
Introducing Our Time For Tech on Dev.To
Tags: womenintech, mentorship, support, breakintotech
Published: 2020-12-31 01:23:16

Hello! 👋🏾

I'd like to introduce the **Our Time For Tech** organization on Dev.To.

At Our Time For Tech, we empower the careers of women-in-Tech. We have 2 tracks: **CodeCollab** and **Better Prep**. Read more about these tracks [on our website](https://ourtimefortech.org).

On Dev.To, our fellows shall be sharing what they're learning during their time with us. I'm excited to witness their breakthroughs, share their frustrations and celebrate their commitment to advancing their Tech careers! 🧡

So keep watching this space! And, hey, if you think Our Time For Tech can help you, please [join our mailing list](https://ourtimefortech.org/#apply), so we can alert you when applications for Cycle 2 open! 🎉
2020 IN REVIEW
Tags: showdev, slimcoder
Published: 2020-12-31 00:54:07

---
title: 2020 IN REVIEW
published: true
description: 
tags: showdev, slimcoder
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/85cui11prhh433bqa4wm.jpg
---

👋 2020 was very tough year because of COVID-19, Many of us lost their jobs and communites still doing virtual meetups.

🌟 I write review post every year so that, I can keep track my progress.

🚀 Even in that tough year, I done few contributions; So here we go:

450+ Contributions on GitHub.
560+ Reputations on StackOverflow.
28k+ people’s reached on Stack OverFlow.
Published 10 articles on Medium.
1x featured in Javascript on Medium.
28 post on Dev.to.
180+ Total post reactions on Dev.to.
7865+ Total post views on Dev.to.
180+ followers on Dev.to.
10,000+ Total views on YouTube.
246 Subscribers on YouTube.
Free Sponsorship with Dev.to.
Contributing Writer for Be Yourself, Voice of Code and Warp 9.
Founded learn with geeks on GitHub.
Conducting a workshop on GitHub (MUET – Jamshoro) 35+ student’s.
Conducted a workshop and talks on Node,Docker, Microservices, Microfrontend (MUET – Khairpur) 30+ student’s..
Contributor of freecodecamp , nodejs.dev, js.org.
Community Manager of Mentors without borders.
Conducting a session on NextGen Cloud Computing (MUET – Jamshoro) 80+ students 300+ views on YouTube.
Conducting a session on Golang: Golang Everywhere (MUET – Khairpur), 15+ students 300+ views on YouTube.
Joined Code with Concepts, Jobream and OSPK on GitHub.
Renamed Techistan to DevCreatives++.
DevCreatives++ and Learn with Geeks is listed top Organization on GitHub in Pakistan.
Member of AWS Community Pakistan and Linux Pakistan.
Dropped a Course “Golang For Absolute Beginners” for free on YouTube.
Golang from zero to hero (session) with Omid,  250+ Views.
Founded Golang Pakistan Local Group.
Core Advisor to DSC MUET SZAB.
Personal WordPress blog crossed 1900+ views.
Did a Session on Hacktoberfest and Open Source, 180+ views on YouTube.
Did a Session on Microfrontends and xstate with Boaz, 100+ views on YouTube.

😉 That’s all, If you like that blog don’t forget to subscribe my blog: slimcoder.wordpress.com/subscribe.
Criando um accordion com HTML5 e CSS3
Tags: html, css
Published: 2020-12-31 00:35:22

_Créditos da imagem de capa: Colorib_

Eu lembro que há um bom tempo atrás quando precisava implementar aquelas páginas de FAQ (perguntas e respostas) sempre tinha que criar um accordion (ou collapsible, o que preferir). E quando eu fazia o código já tinha até o script pronto em jQuery, algo mais ou menos assim: 

```
$('.title').click(function(){
 $(this).parent().find('.description').slideToggle();
});
```

Com o código acima eu praticamente tinha o funcionamento padrão do meu accordion. A questão é que com o tempo as coisas foram mudando e o jQuery foi entrando em desuso por boa parte das pessoas desenvolvedoras para realizar as coisas tudo de forma mais nativa com o Javascript ou Vanilla JS. Não só isso, mas com a vinda do HTML5 e CSS3 muitos dos widgets que antes fazíamos com JS ou jQuery (quem lembra do jQuery UI?) agora daria para fazer apenas com as duas linguagens acima e um dos que hoje em dia conseguimos fazer sem JS é o nosso accordion. Mas como? 

O HTML5 possui duas tags chamadas `<details>` e `summary`. O primeiro serve para encapsular o `<summary>` e também para criarmos o widget. Já o segundo serve para definirmos o título clicável do accordion (que abre e fecha). E como fazemos isso? É o que vou mostrar agora no exemplo abaixo :) 

{% codepen https://codepen.io/bezzocoaline/pen/QWKQMyV %} 

Se você reparar no código acima para cada título/descrição eu adicionei um novo `<details>` e `<summary>` para que cada um possa funcionar corretamente. Assim: 

```
<details>
 <summary>Título</summary> 
 <p>Descrição</p>
</details> 

<details>
 <summary>Título</summary> 
 <p>Descrição</p>
</details> 
```

Por padrão o `<summary>` exibe um caractere especial diferente do exemplo acima. Para customizar precisei desabilitá-lo utilizando a pseudo-classe `::-webkit-details-marker` e adicionando um `display: none` para que o mesmo desapareça. 

E para adicionar um novo caractere especial de +/- quando abre e fecha (respectivamente) utilizei a pseudo-classe `:before` (porque eu quero que o sinal apareça antes do meu texto) e a variante `[open]` que é utilizada junto com o `details` que permite que a gente faça uma customização do accordion quando o mesmo tiver aberto. 

Como vocês podem ver com apenas HTML5 e CSS3 conseguimos criar um accordion funcional e com poucas linhas de código.  

Por hoje é só, pessoal :) Espero que tenham gostado do artigo. Até a próxima!
When to Use a React Context vs a JS file
Tags: react, tutorial, webdev, javascript
Published: 2020-12-31 00:12:41


Everyone loves react contexts. A little too much in my opinion… You go into a new React project now and its like

<a href="https://imgflip.com/i/4s1ea9"><img src="https://i.imgflip.com/4s1ea9.jpg" title="made at imgflip.com"/></a><div>

Lets take a step back and talk about what a context is, when you should use one, and when you should just go with a simple JavaScript file instead.

**TLDR:** If you need to share data (more than a couple of props) between multiple levels of components (ex: grandparent to grandchild or deeper) or if multiple sections of the application need access to certain data use a context. Otherwise you can just use a normal JavaScript file to keep your data and presentation separate.

## What is a Context 
All a context is is a way to pass data through components without having to prop drill (pass props down to each component). This is great because rather than having to have your data pass through 4 components and remember to add it to each component we can just access the data we need at each level

## When to Use a Context 
Since its release a lot of people have been using contexts everywhere. Anywhere they are retrieving or manipulating data they are using a context instead of just a normal JavaScript file. Contexts are great but they are also a good amount of overhead and not always necessary. If you are not passing data more than one level or using data globally you do not need a context. Just use a normal JavaScript file. Now I know some of you are saying “but what if we need that data later why not just make it a context now?” and the answer is because you don’t need to. Making something a context later is very easy to do and can be done if you need it but not every parent component needs a context. not every grandparent does either. Not all grandparent components share data with the children. 

## Popular Use Cases for Contexts
* User access information (authentication) 

* Theming

* Grandparent to grandchild data sharing

* Global State Management
🛡Preventing HTTPS Downgrade Attacks 💣
Tags: attacks, security, downgrade
Published: 2020-12-31 00:03:53

✋ HTTPS downgrade attacks compromise your web application security by switching to HTTP. Learn how to prevent them.
[Read more...](https://auth0.com/blog/preventing-https-downgrade-attacks/?utm_source=content_synd&utm_medium=sc&utm_campaign=http_attack)
One does not simply build a rails project...
Tags: codenewbie, flatironschool, rails, mybrainmightexplode
Published: 2020-12-31 00:03:43

Just in time for the end of this apocolyptic year, I have completed my third project for Flatiron School.  We were given additional time to work on this project, partly due to the holidays, and that was a great thing for me because I found myself running into multitudes of problems on this one.
  
My first tip here is this:  Never underestimate how much you can use an API.
  
My first version of this project was making a database for my movies.  I wanted to pull information from an API and be able to sort by actor, director, year... Using an API is a wonderful resource and I very much recommend it - if you are able to work within any restrictions they might have.  Alas, I was not.
Next, I found a TSV file with all the information I needed!  Awesome!  Except the file was way too big to use and keep the information on GitHub.

So my final project, and solution to my problems, was a scaled back version of what I originally intended - a Lord of the Rings movie database.  Honestly, it was really fun to build and allowed me to get a little more creative than I likely would have been with the original idea.

I still used a TSV file and used this to seed the databases.  I found this an easy and useful way to get initial information into my project.  It's really pretty easy for anyone who is able to find or create one.

I just created a TSV folder in db/seeds.  I placed all the needed TSV files in this folder.  This ended up looking like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eindz8654wi49fayr84d.png)

Next, add the handy gem 'tsv' in your Gemfile, bundle install and then we need to write some code in our seed.rb file.  This will be individualized for everyone and you can always refer to the TSV gem page for pointers.
[Link](https://github.com/mimimi/ruby-tsv)

Since I created my own TSV file, my code here was pretty straightforward this time around.  But the previous version of the project was a different story so I could see how this could get pretty complicated.  Just keep in mind, the information likely is coming over in hashes and the first line is your key.  This will help you figure out what you need.  Also, use byebug or whatever debugger you prefer!  That's what they are there for!

Here's what I ended up with: 
```
 require 'tsv'

    TSV_ROOT = Rails.root.join('db', 'seeds', 'tsv')
    file_name = "lotr-films.tsv"
    file_path = File.join(TSV_ROOT, file_name)

    TSV.parse_file(file_path).each do |line|
   
                Movie.create(line.to_h)
   
    end
```

Now, just run rails db:seed and we're all set!

This project was quite a challenge, but I feel like every challenge is just more opportunity to learn something else... so I must be learning tons!  Check it out and let me know what you think!

[Link](https://github.com/mimirandi21/lotr-db)
Pandemic end of the year reflection
Tags: pandemic, reflection
Published: 2021-01-16 02:04:22

---
title: Pandemic end of the year reflection
published: true
date: 2020-12-31 00:00:00 UTC
tags: pandemic, reflection
canonical_url: https://www.manuelobregozo.com/thoughts/pandemic-end-of-the-year-reflection
---

Who would have thought that this was a nice year to move between countries? 

What a year this has been, each person must have a hell of a story to share about this year, so here is mine!

It all started in Argentina where I was spending my summer holidays (well summer in Argentina, winter in Europe), while anxiously waiting for the Spanish Visa to be approved. Something that finally happened on my second week there, so thankfully I had the opportunity to celebrate this in person together with my family and friends, who carefully supported us during the process of moving from the Netherlands to Spain.

Far from being an easy thing, making up this decision was quite difficult! Especially since lot of people were telling me I was taking a step back on my career by doing so, but we decided to trust our instincts and feelings. Well, I am glad we did, because we could not be happier now, weather and social life mad a big difference for us. 

When we were about to return to Amsterdam from Argentina, the pandemic started to hit, and what we all know happened! Our belongings were shipped to Barcelona on a Monday and our flight was canceled on a Friday within the same week at the end of March, thus we ended up locked down in Amsterdam without our things for more than 3 months. It was difficult at first, but it also helped us learn to live and survive in a simpler way, and since the confinement was not that strict in Amsterdam, I was able to use running as a way to de-stress myself from my anxiety.

But it wasn't just bad news. As a side effect of this situation I started to read and write a lot, I joined various development communities, where I was able to learn from other experiences and contribute to helping others in many different ways, which made me realise that coaching is something that I can enjoy (It may be because I can offer the support and help that I didn't have at the beginning of my career). Most importantly, I demystified developer communities that I thought were always full of self-centered, competitive developers who put others to shame.

It was July 2020, just after the first wave of the pandemic, when we managed to catch a flight to Barcelona, ​​with our little backpacks full of illusion and dreams to get to know the city where we always dream of living.

The pandemic did not help, but looking at the bright side, walking around Barcelona without tourists was an extremely pleasant opportunity to experiment, plus the real estate market was not as crazy as usual, which allowed us to find a nice apartment.

So here we are, still on the starting line of this new journey, and like all of us waiting for the pandemic to end so we can feel free again.

Stay safe!
Alpine.js
Tags: alpine, javascript
Published: 2021-01-02 20:11:25

---
title: Alpine.js
published: true
date: 2020-12-31 00:00:00 UTC
tags: alpine,javascript
canonical_url: https://blog.jonstodle.com/alpine-js/
---

jQuery has been a great way to quite easily add some interaction to your static HTML, but it might start to feel a bit heavy-handed once you start trying to coordinate multiple parts of the page.

Wouldn't it be nice if there was a way to set up this interactivity a bit more declaratively?

# Enter [Alpine.js](https://github.com/alpinejs/alpine/)

Add Alpine to your page like this

```

<script src="<https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js>" defer></script>
```

You're then able to declare simple components, directly inside your HTML:

```

<div x-data="{ open: false }"> <button @click="open = true">Open Dropdown</button> <ul x-show="open" @click.away="open = false" > Dropdown Body </ul> </div>
```

`x-data` indicates the _root_ element, and the initial state of your component. The children of that element are now able to listen to events with the `@<event name>` syntax. Alpine also has some shortcuts, such as `x-show` which hides or shows an element.

Alpine's choice in style is lifted straight from Vue, so if you're somewhat familiar with Vue, you should feel right at home with Alpine's vocabulary.

Speaking of Vue, it's also possible to create reusable components:

```

<div x-data="dropdown()"> <button x-on:click="open">Open</button> <div x-show="isOpen()" x-on:click.away="close"> // Dropdown </div> </div> <script> function dropdown() { return { show: false, open() { this.show = true }, close() { this.show = false }, isOpen() { return this.show === true }, } } </script>
```

`dropdown` returns an object which contains all the component code: state is defined using fields and functions are declared in the standard way.

Setting `x-data` to the result of `dropdown` makes the fields and functions available to all child elements. Use this to easily reuse some logic.

# Stimulus

Another framework trying to do much of the same thing is [Stimulus](https://dev.to/scottw/stimulus-2jio): Use your existing HTML and sprinkle in some JavaScript.

I'm not completely sold on Stimulus. I think it's the right idea, but it's not executed as elegantly. Alpine feels a bit less in your way, but that's just a personal preference.

# Closing thoughts

If you're in need of some interactivity on your so far static page, really give [Alpine](https://github.com/alpinejs/alpine/) a look. I've had success with it so far when all I need is a bit of sprucing up in my static HTML.

Happy coding!
How to undo the last commit from a remote git repository?
Tags: git
Published: 2020-12-31 00:00:00

---
  title: How to undo the last commit from a remote git repository?
  published: true
  tags: Git
  date: Thu Dec 31 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/undo-last-commit-in-remote-git-repo
  cover_image: https://melvingeorge.me/_next/static/images/main-7ed2a908e6b98182b5f46eebfbe9450a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/undo-last-commit-in-remote-git-repo)
  
To undo the last commit from a remote git repository, you can use the `git reset` command.

First, you can use the,

```bash
git reset HEAD^
```

command. This will undo the last commit locally.

Then you can use the,

```bash
git push origin +HEAD
```

command to force push the local commit which was reverted to the remote git repository.

### Feel free to share if you found this useful 😃.

---
HABLEMOS DE xml⌨
Published: 2020-12-30 23:42:18

Bien, XML es una extensión del lenguaje de marcado, html.
XML fue creado para almacenar y transportar datos.

La importancia de xml es tal, pues está presente en el software y hardware de un producto.

Unas de las diferencias entre xml y html. En html las etiquetas están predefinidas, en xml no todas las etiquetas están predefinidas. Incluso tienes la libertad de inventar la mayoría de etiquetas, así como la estructura del documento. Y en html no. No puedes inventar etiquetas, mucho menos la estructura del documento.

Tiene la misma sintaxis de comentario que html <!---->.

Gracias por tu tiempo.
Continuaré tomando nota....
What is React ? How to set up React?
Tags: react, beginners, webdev
Published: 2020-12-30 23:41:47

#What is React ?

It is an open source front-end library developed by Facebook which helps for building the UI components. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.
React allows developers to create large web applications that can change data, without reloading the page. The main purpose of React is to be fast, scalable, and simple. It works only on user interfaces in the application.

##Why React?
React is very simple and easy to learn. The component-based approach, well-defined lifecycle, and use of just plain JavaScript make React very simple to learn, build a professional web. React uses a special syntax called JSX which is a mixture of JavaScript and HTML. 
React allows us to compose complex UIs by writing a small piece of code which is called Component.

##Prerequisites
- HTML
- CSS
- JavaScript

##Technical Requirement 
- Nodejs installed
-  A preferred Code Editor (Atom , VS code recommended)

#Setup
We can setup the react app by :-
###npx
`npx create-react-app <project-directory>
cd <project-directory>
npm start`

###yarn
`yarn create-react-app <project-directory>
cd <project-directory>
yarn start`

###npm
`npm init react-app <project-directory>
cd <project-directory>
npm start`

Then it runs the app in development mode.
View the app in 
> http://localhost:3000

Your First React App is ready!
First approach to mobile design
Tags: figma, design, mobile
Published: 2020-12-30 23:11:59

Some months ago, as a developer, I got caught by designing systems and guidelines, because in all my projects I always tried to have, in the end, a well cared graphic. But I always had bad results, and when I built some mobile apps or website, I always used frontend framework (such as Bootstrap) or pre-built components (I use React Native) to have some sufficient result.

So, I decided to start studying a bit deeper how design is chosen and made, when starting building an application.

During Black Friday I bought a course that focuses only on design from the point-of-view of developers.

After some episode of the course I decided to start dive in this "world" and so I downloaded Figma and started a new project.

I started from scratch, with a blank page so I had no idea of what to design.

I was with zero inspiration and a lot of will to start, so I opened Dribbble and I started searching for some design ideas. 

Then finally I understood that if I would continue searching the "perfect idea", I would never start and inspiration comes by doing, also.

So, in the end, I decided to create the template of an eBooks app. I created a simple wireframe of the main screen and then I decided to create the templates of the Main Screen and Product Screen.

Here's my results.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4j84wgosl58i7wi1cvdn.png)

I wanted to share this to receive some feedbacks about this, especially if there is someone that know this arguments and some design techniques or if something is wrong (such as colors or fonts). I'm still a newbie about this argument and I have a lot to learn, so any feedback will be appreciated!

Also, for the next future another challenge for me is to port to React Native code this template, after adjusting something, because could be very useful for learning new styles techniques.