teleren/devto huggingface dataset:
Day 23 - Making A Flashcard
Tags: beginners, codenewbie, css
Published: 2020-10-06 19:27:46

Today I made a simple flashcard component. Check out the pen [here](https://codepen.io/josno/pen/eYzObqQ)!

## What I Learned
I worked on expanding my knowledge with 3D animations using the `perspective` and `transform-style` properties. Cool stuff!

## How This Will Help Me
The experience helped increase my CSS toolkit and know-how.

Onto the next challenge!
Starting an HTTP Server in Seconds With Just 2 Lines of Code
Tags: webdev, programming, httpserver, batch
Published: 2020-10-06 19:26:52

When I’m developing a website on my PC, I like to be able to test out the design on multiple devices — occasionally sharing it live with people around the world.

Recently, I developed a simple batch script to do two things: start an HTTP server and open up a tunnel to the server so anyone on the internet can access it.

---

# Prerequisites

There are a few things you’ll need to have set up before starting your HTTP server:

## Windows PC

The main code in this article is made in a DOS batch (`.bat`) file, which is only available on PCs.

## Python 2 or 3

[Python](https://www.python.org/downloads/) will be used to start the server on your localhost. You can use either Python 2.x or Python 3.x. You’ll also need to make sure it’s added to your PATH when you install it.

There’s only a minor change you’ll need to make to the code if you choose to use a version of Python 2.

## ngrok

To open up a tunnel to your local machine from the rest of the web, we’ll use [ngrok](https://ngrok.com/download). It’s free and fairly easy to install and use, but make sure you [add it to your PATH](https://dev.to/bsoyka/adding-files-to-the-path-on-windows-10-39jo) as well.

---

# The code

{% gist https://gist.github.com/bsoyka/8f8bc0bf5ca84d8fc589652df3de0b20 %}

To help us understand what’s going on here, we’ll take a look at each line of the code.

## Starting the server

{% gist https://gist.github.com/bsoyka/2178c2b228816cb3ad8130d437185581 %}

As mentioned earlier, we’ll use Python to start up a local HTTP server.

The code above starts a new command prompt window running Python’s `http.server` module on port 80. This means the contents of the folder you run this command in will now be served at http://localhost:80.

If you’re using a version of Python 2, all you need to do is replace `http.server` with `SimpleHTTPServer`.

## Opening a tunnel to localhost

{% gist https://gist.github.com/bsoyka/9a006952ae7f94375174f2865cabe654 %}

We’ll use ngrok to open up a tunnel to the server running on your localhost. This means anyone who visits your auto-generated ngrok URL will see your local server running on Python.

---

# Setting it all up

To use this script, you’ll want to save it to a folder in the PATH variable. This means you’ll be able to use it from anywhere on your computer.

{% link https://dev.to/bsoyka/adding-files-to-the-path-on-windows-10-39jo %}

To actually use the script, click on the address bar in the File Explorer, type in the name of the script as you saved it — with or without the file extension — and press Enter.

Alternatively, you can open a Command Prompt window, navigate to the folder you’d like to host, and run the script from there.

---

This simple script can make your life a whole lot easier when it comes to developing a website. With just a few clicks, you can start a server and see how your site looks on a variety of devices.
Hello, World!
Tags: meta
Published: 2020-10-06 19:20:18

![gif alt text](https://media.giphy.com/media/8KpFqaJH9MdY9jm9kb/giphy.gif)


As DEV's first Business Development Manager, I'm here to enhance the team’s sales and account management apparatus, build processes to support our growing suite of community-first sponsorship options, and become the main point of contact with our partners. If you are interested in supporting DEV as a sponsor, advertising in our podcasts, discussing a custom campaign (hackathon, etc.), or are looking for other ways to engage with the DEV community, email me at <emiliano@dev.to>.

## More about me:

This year has been unreal —various unpredictable events, along with countless challenges that, for the first time, made me feel as if we all are under the same rooftop, staring at the same clouds during the day and gazing at the same stars during the night. This year forced upon the world a wave of change, and it also helped me seek to grow, which is why I'm thrilled to join DEV!

### Why DEV

I read that most DEV members are fueled by cold-brew, like myself, so I had to find like-minded people...

Jokes aside, since 2015, I've been fascinated by developer communities. Mostly through the work of Pieter Hintjens, regarding online communities and "Social Architecture," I became aware of the vast volume of exchange on the field. Unlike any other profession, developers are always engaged in an infinite loop of learning, engaging, creating, and distributing, traits that I admire.

Having collaborated with developers on-site, while sitting next to each other on yoga balls, and remotely through video-tools, my fascination and admiration has only increased. By joining DEV as their first sales-focused hire, I'm able to pursue what I find meaningful and what makes me happy. I'm feeling lucky, honored, and ready.

#### Outside of work:

I am a self-proclaimed chocolate connoisseur, beer aficionado, and PUBG gamer ex·tra·or·di·naire that has been working remotely since 2017. My goal in life is to keep on learning, and I recently enrolled in Udacity's intro to programming Nanodegree to further strengthen my understanding of this space.

When I'm not by my desk getting some work done, you can find me brewing coffee, walking my dog Nino, hiking, gaming, or traveling around.

Got any questions for me? Fire when ready!
Adding Files to the PATH on Windows 10
Tags: windows, windows10, path
Published: 2020-10-06 19:15:31

As a Windows user, you'll often find the need to add executables and other files to your system PATH. This means you can access them from any location in the command prompt.

Often, program installers will do this for you. For example, the Python installer has a checkbox to add Python to your PATH variable automatically.

In the case you need to manually add to your PATH, here are some simple instructions:

---

# Make/find a folder

You can't directly add files to the PATH variable, only folders. So, start off by finding the folder where your file is located.

If you simply downloaded the file, it's recommended that you make a folder in another location such as your Documents folder.

## Get the folder path

By clicking on the "address bar" in the file explorer, you can get the folder’s path.

![Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/5nl9r4gtbh68i0dandse.png)

# Navigate to "Advanced system settings"

Right-click on the Windows logo to show a new menu. Choose the "System" option. Once the Settings app opens up, choose the "System info" link.

This will open up a Control Panel page where you can view information about your device, and more importantly, change a few advanced settings. Click the appropriate link to visit that menu.

![Screenshot](https://dev-to-uploads.s3.amazonaws.com/i/yvwwnnqbqnz68ygv3ljg.png)

Once here, click on the button at the bottom to open the Environment Variables menu. With this new menu open, select the PATH variable in the first list and click the Edit button.

Press the New button, paste in the folder path from earlier, and press Enter. Press OK a few times and you're done!

---

Now that you've added your folder to the PATH variable, any files you add there will be accessible from the command prompt no matter where you are on your computer.
Celebrities Explain DevOps
Tags: devops, showdev, aws, kubernetes
Published: 2020-10-06 19:08:51

For everyone who is new to DevOps or interested in celebrities (or both), or just want to see David Hasselhoff, Flavor Flav, and Carole Baskin explain AWS, Kubernetes, and Docker, this is for you. Enjoy:

[![](http://img.youtube.com/vi/QxvmO-QlxJQ/0.jpg)](http://www.youtube.com/watch?v=QxvmO-QlxJQ "")

Backstory: https://cto.ai/blog/celebrities-explain-devops/
What Is Open Source Software?
Tags: programming, technology, opensource, coding
Published: 2020-10-06 19:02:08

Open source software is software that anyone can inspect, change, and share with others.

Code is the part of a program that most users don’t have to see. It shows how the program functions, like a recipe.

When someone makes their code open source, they are letting anyone take a look at it and make changes.

---

# What’s the difference from other types of software?

Some other software is more restricted. This is typically called proprietary or closed-source software.

A couple examples of this are [Microsoft Word](https://products.office.com/en-us/word) and [Adobe Photoshop](https://www.adobe.com/products/photoshop.html). Both of these were made by separate companies, and their code isn’t shared with the world for anyone to see.

Different programs can also come with different licenses. The license for a program determines how — or if — people can use, share, or change the code.

---

# How can open source software help?

Open source software can help in a myriad of ways. Here are a few:

## Control over function

Since users can see and change how the program works, they can have more control over how it works.

## Learning new skills

Contributing to open source projects is a great way for beginning programmers to learn more skills and get more experience.

## More secure

When anyone has the ability to spot a bug in the code, any issues can be resolved very quickly. It’s like having hundreds more eyes inspecting your code to make sure it runs smoothly.

## Build a community

This one may not seem as important, but larger open source projects start to build up a community of contributors over time. Contributors can talk about parts of the project in a friendly manner, making discussions much more productive and smooth.

---

# Isn’t open source software just free of charge?

This is a common misconception about open source software. While open source software is free most of the time, people can make their code cost money too.

It all depends on the license chosen for a piece of software. If the license says that anyone can modify and use the program in private, then they can do that.

---

# Where can I find open source software on the web?

One of the largest websites where you can find open source programs is [GitHub](https://github.com/). You can also take a look at [GitLab](https://gitlab.com/) to name a couple.

GitHub provides hosting for projects using [Git](https://git-scm.com/) for version control. Git keeps track of all changes in a set of files and helps with managing both small and large projects.

---

Overall, open source software can make a huge difference in how programmers create and share their code. By sharing code with others, you can improve it and make it better than it ever was before.
Store SQLite3 file in Google Drive..
Tags: python, flask, sqlite
Published: 2020-10-06 19:00:54

So, i'm working on a flask app with sqlite3.
This app is for my job. The idea is to use Google Drive to store the database file. The application would connect to it, and retrieve/modify data.
Is this possible with Google Drive? I've been investigating the API and I have my doubts.

The app is pretty much done.

Please I need some advice and if someone has achieved something like this and knows how to, or where to read about this, I'll be grateful for life!
How to get a job as a Python/Django backend developer roadmap
Tags: python, django, backend, roadmap
Published: 2020-10-06 18:43:26

A while ago I designed a Django Developer Career Roadmap for those who wish to start in this field and enter the software industry market.

I’ve recently created a GitHub repository and updated it with some new stuff.
Check out the repository if you wish to become a Django developer or strive to improve your existing skills!
https://github.com/mmoallemi99/developer-career-roadmap/

p.s. this roadmap assumes you have knowledge in python and programming fundamentals

If you have any suggestion or you wish to improve the roadmap, feel free to open a pull request in GitHub!

Happy coding 🙂

Source:
https://mmoallemi99.com/blog/how-to-get-a-job-as-a-python-django-backend-developer-roadmap/
Meet BrainBot! 🧠🤖
Tags: contributorswanted, hacktoberfest
Published: 2020-10-06 18:30:17

BrainBot is a fun new bot for Ryver, a team communication platform. It's written in Python using [the `pyryver` module](https://pypi.org/project/pyryver/) and uses an existing account to log in.

The bot's main feature is its ability to bring in a random and fun conversation starter to liven up a group chat on Ryver.

# BrainBot is looking for contributors, and we'd love your help.

The bot is open-source on GitHub and usually has a handful of open issues you can work on to improve the BrainBot experience for everyone.

All you need to do to get started is visit the bsoyka/brainbot repo on GitHub:

{% github bsoyka/brainbot %}

If you have any questions about using or contributing to BrainBot, feel free to ask in a comment or email brainbot@bsoyka.me!
Port Knocking (Network Security Technique) Explained and Demoed in 5 Minutes!
Tags: webdev, devops, security, linux
Published: 2020-10-06 18:28:47

Remember the secret knock you used to have to determine if someone was allowed into your treehouse as a kid? 👊

There is a digital equivalent called "port knocking" in which a secret sequence of connection requests is used to open up firewall access. 🧱

I just released a quick (<5 min) video in which I explain how it works and provide a working demo!


{% youtube IBR3oLqGBj4 %}
Get values from selected keys
Tags: log
Published: 2020-10-06 18:27:25

Got text values corresponding to the selected keys, sent from the backend server through an object, by a GET request to the HTML form, using a Nunjucks tag.

```
server.get('/route/:id', (req, res) => {
    return res.render('page', { data })
})
```

```html
{% if object.key == "value"  %} text value  {% endif %}
```
___

🏗 Project: https://github.com/rafaellimags/gym-manager
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2020-10-06 18:07:45

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round-up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
Every Tuesday, we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️

### Effective JS Debugging with the Console

@developer_buddy to the JavaScript console rescue!

{% link https://dev.to/developer_buddy/there-s-more-than-just-console-log-other-useful-ways-to-use-the-console-in-javascript-17l8 %} 

### Actions Speak Louder Than Words. Data Speaks Louder Than Actions

It's not every day that we get a peek inside the mind of a startup CTO! Thanks for providing that opportunity with this post, @eisabai!

{% link https://dev.to/eisabai/four-things-i-wish-i-knew-as-the-new-cto-of-a-startup-4k9j %} 

### Nida Has Your Back(-End)

@anonyda describes the World Wide Web as lemonade — the front-end is the distinctive lemon juice flavor and the back-end is the essential ingredient: water

Nida will help you get hydrated with a tall glass of WWW-ade in this post.

{% link https://dev.to/anonyda/the-backend-dev-s-web-109e %}

### Passing the Google Lighthouse Audit (With Flying Colors!)

Getting a solid Google lighthouse and gtmetrix score can be difficult. This post by @jessica50969989 will walk you through how they got a great one!

{% link https://dev.to/jessica50969989/how-i-got-perfect-google-lighthouse-score-with-gatsby-5coj %}

### A Compass For Your Hacktoberfest Project Selections

@mcastellin shares a few great tips on how to pick which _type_ of contribution to make for Hacktoberfest. Super helpful!

{% link https://dev.to/mcastellin/hacktoberfest-ideas-for-contributing-as-a-beginner-4k3b %}

### Ethics and the Influence of Code

"Today, it’s impossible to think of a world without any influence of code" writes @kateh — so, how can we use code ethically to shape that world?

{% link https://dev.to/kateh/beyond-writing-code-what-are-our-ethical-responsibilities-al7 %}

### Developer Film Fest  

Who else needs a movie break? 🙋🏻‍♀️ This list by @ombharatiya provides an awesome watchlist that helps you justify* a movie-binge with developer-related subject matter.

 _Note: You don't need to justify a movie binge to **me**_.

{% link https://dev.to/ombharatiya/9-must-watch-movies-for-programmers-4kgp %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
Making CSS vars with SCSS vars
Tags: css, scss, sass
Published: 2020-10-06 17:15:15

SASS treats CSS variables (also known as custom properties) in a special way, which means it's a little difficult to create CSS vars dynamically:

>Sass parses custom property declarations differently than other property declarations. All tokens, including those that look like SassScript, are passed through to CSS as-is.

[SASS docs](https://sass-lang.com/documentation/style-rules/declarations#custom-properties)

Which can cause problems, especially for my situation where I want to

1. Keep the SASS variables around because they're used in a lot of existing code, but also
1. Add CSS variables for new code

So here's how I've worked around this. It's not ideal, because it still duplicates the name of the SASS variable, but it works for my situation. :shrug:

```scss
$primary-color: #30dbb4;

@mixin add-css-variable($name, $color) {
  --#{$name}: $color;
}

:root {
  // repeat as necessary for all your vars
  @include add-css-variable('primary-color', $primary-color);
}
```

You can test this out in the wonderful [SassMeister playground](https://www.sassmeister.com)
React.js and TypeScript (Components + Props)
Tags: typescript, react, webdev, tutorial
Published: 2020-10-06 18:06:27

In this video I'll show you how to take advantage of TypeScript to improve your productivity creating/consuming components.

This is an introduction video to TypeScript in React.js

I hope you find it helpful.

Let me know what you think :)

{% youtube 0cXccUew19k %}
Introducing... DigitalOcean App Platform!
Tags: news, webdev, codenewbie, beginners
Published: 2020-10-06 18:04:01

It looks like Heroku has a new competitor! 

- Build, deploy, manage, and scale apps
- Support for Node.js, Python, Go, PHP, Ruby, Docker, static sites
- Fully managed solution

[DigitalOcean App Platform](https://www.digitalocean.com/blog/introducing-digitalocean-app-platform-reimagining-paas-to-make-it-simpler-for-you-to-build-deploy-and-scale-apps/?utm_medium=social_organic)
El año que viene empieza ahora
Tags: xaviermitjavila
Published: 2020-10-06 17:36:07

---
title: El año que viene empieza ahora
published: true
description: Desgraciadamente ya hace días que hemos dejado las playas atrás. Ya hemos vuelto al trabajo. En casa o en la oficina. Pero en el trabajo. ¡Ya estamos otra vez!

tags: xaviermitjavila
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/2aablaozqy19rd5n83bw.jpg
---

Desgraciadamente ya hace días que hemos dejado las playas atrás. Ya hemos vuelto al trabajo. En casa o en la oficina. Pero en el trabajo. ¡Ya estamos otra vez!

Los primeros días de Septiembre normalmente son para revisar las cifras del mes de Agosto. Este año revisamos también las de los últimos tres meses para entender qué ha pasado desde que acabamos el confinamiento. Normalmente, son días para decidir cómo queremos cerrar el ejercicio. Para cortar o confirmar las inversiones hasta final de año, cuadrar el beneficio, alcanzar el presupuesto y poder decir que tenemos otro en el bolsillo. ¡Presupuesto! Son también los días en los que preparamos el del próximo año. ¡Normalmente!
Pero de normalidad no tenemos nada ahora. ¿Agosto? ¡Un desastre! ¿Los últimos tres meses? ¡Otro desastre! La decisión sobre las inversiones está tomada. Hace días que todo el mundo las ha cortado. ¿Y el Presupuesto del 2020? Nos lo podemos pintar al óleo. Será uno de los pocos que no habremos hecho.

Y aún así, nos piden que preparemos el del año que viene. Como cada año. Y si no sabemos que vamos a vender mañana, ¿cómo podemos estimar lo que podría ser un objetivo lógico para el próximo año? ¿Debemos detener nuestras organizaciones durante semanas para preparar cifras que sabemos, antes de empezar, que no servirán para nada? ¿Cifras que tendremos que cambiar cada mes una vez comience el año? ¿En el actual contexto debemos pararlo todo para "hacer números"? ¡Evitemos hacerlo! ¡No tiene ningún sentido!

Detengámonos, ¡sí! Pero para repensarlo todo. Démonos la oportunidad de pensar. De pensar de verdad. Salgamos todos de la rutina. De los charts que deben completarse. De las presentaciones de cifras y de los calendarios preestablecidos. Y pongámonos todos a pensar. Es el momento de las ideas. De las grandes ideas. Si son buenas, las cifras llegarán solas. Pero es ahora. No perdamos semanas preparando los presupuestos de siempre. ¡Este año hacemos un presupuesto de ideas!
Quick Resources for Developers
Tags: showdev, hacktoberfest, webdev, contributorswanted
Published: 2020-10-06 17:23:23

This year, I wanted to participate in Hacktoberfest in a different way.

On top of contributing to open source code, I've created a list of shortcuts, tools, and free resources for new developers. This repo contains frontend "cheatsheets", interview prep, free APIs, and more.

If you have any resources you find useful or have used when you first started on your engineering journey, please share them!

[This repo](https://github.com/jeannienguyen/quick-resources-for-developers) will be public and open for contributions. To encourage better contributions to open source, I'll only be accepting a max of one PR per person.

Happy hacking!