DEV Community: KurzGedanke

Help? Debugging CSS Dark Mode @media prefers-color-scheme

KurzGedanke — Wed, 08 Jul 2020 12:45:06 +0000

Hi everyone,

I recently started developing my blog with the @media (prefers-color-scheme: $THEME) in mind. Like this:

@media (prefers-color-scheme: dark) {
  body {
    color: #eee;
    background: #121212;
  }

The great thing is, due to this option the theme is corresponding with system color theme and automatically switches.

But I can't find a great way to debug these query and would like to ask the dev community if they know something. In the past I manually switch in my system preferences.

But this is somewhat laborious and changes the whole color theme of my computer...

Are there maybe any browser addons for Firefox/Safari/Chrome which might help me with those querys and just changes what my browser things color theme is on?

Thank you very much for your help!

Let us be coding Djinnis 🧞‍♂️🧞‍♀️

KurzGedanke — Sat, 06 Jul 2019 14:27:50 +0000

Imagine you are searching through an old drawers. Somewhere you find an old coffee mug ☕️. It looks nice and you like it. You think for yourself: "Mh... after a lot of hard work, a coffee and a few dev.to post would be nice to relax!" You take the mug, clear it from the dust of the decades, put it under the coffee machine and the coffee starts running. As soon as the first drop hits the bottom of the mug a djinni appears 🧞‍♂️🧞‍♀️. At first it looks confused, but its gets conscious fast. "I'm am your personal coding djinni! I will code one app for you. What should it be?!" You start thinking... "Write your answer down in the comments!"

Every developer knows this feeling: "I have a lot of cool technologies I want to test and improve my skills in" but somehow you want to do something productive, not just the "Hello World"s, Calculators and Tik-Tak-Toes. You have ideas, but sometimes there are completely out of scope to do. Something simple and still productive? Nope... nothing on mind.

And I have the same problem right now. I started to learn react-native a few days ago and published my first app. Take a look if you like! (HexToDec - iOS AppStore) But I'm somewhat out of idea, what to do next.

So I ask you: What are your problems which have not yet been solved? What App, Website (or even blog) are you missing? Post it in the comments and maybe someone will take care of it, to practice this stylish new framework or just to expand the portfolio.

Let us crowdsource our needs, ideas and skills, so everybody can benefit! To easily skim the comments I would suggest some simple markup, like:

Platform: e.g. iOS
Problem: Short description of the problem
Explanations: An in-depth discussion of the problem/app.

Share your ideas, have fun building, learn something and most of all: Don't forget the self-care!

GERMAN Wenn das Wort "Framework" Panik auslöst - Eine Methode zum schrittweise lernen

KurzGedanke — Sat, 06 Jul 2019 02:16:24 +0000

Photo by Annie Spratt on Unsplash

Das Internet und vor allem das World Wide Web ist eine weite Landschaft. InternetLiveStats sagt es gibt rund 1.700.000.000 (eine Milliarde, 700 Millionen) Webseiten. Das ist eine Menge. Im vergleich dazu gibt es knapp 1.024.470 (1 Millionen) npm Pakete. Das ist zwar nur ein Bruchteil von dem, was es an Webseiten gibt, aber immernoch sehr, sehr viel.

Durch diese Masse an Paketen, Frameworks und Design Konzepte durchzublicken ist gerade am Anfang extrem überfordert und kann ab einem gewissen Punkt für viel Frust sorgen.

So war es auch bei mir. Was darin resultierte, dass ich maximal bei basic HTML, CSS und Javascript geblieben bin. Oberste grenze war jQuery und Bootstrap. Worte wie React, Redux, Vue, SCSS oder Express waren das Grauen für mich.

Man denkt sich: "Ich mach das jetzt!", öffnet die Dokumentation und versteht nur Bahnhof. Googelt nach Tutorials, setzt ein "Hello World" auf und versteht immer noch nicht mehr.

Aber ich habe es geschafft, aus diesem Teufelskreis auszubrechen und möchte euch heute verraten wie!

Die Lernmethode

Jeder lernt anders. Manche mit einem Buch, andere mit Youtube Videos, Beispiele oder Dokumentation. Ich kann mit allem was anfangen, aber nichts von dem hat mich so wirklich 100% zufrieden gestellt. Selten lag es aber am Material. Häufiger wie ich damit umgegangen bin.

Diese Umgang habe ich mit FreeCodeCamp gelernt. #notSponsored

FreeCodeCamp ist eine non-profit, die kostenlos Online Kurse zur Webentwicklung anbieten. Sie verwenden eine Mischung zwischen einem Praktischen und einem Theoretisch Ansatz, der auf sich aufbaut.

Nehmen wir an ich möchte Javascript lernen. Ich starte also den Kurs und bekomme erst mal erzählt, was Javascript überhaupt ist. Darauf hin geht es aber recht schnell zu den Übungen. Auf der linken Seite des Bildschirms wird mir nun ein Konzept erklärt und auf der rechten Seite gibt es einen Code Editor. Man liest sich also die linke Seite, mit dem Konzept und Code Beispielen durch. Am ende gibt es eine kleine Aufgabe dieses Beispiel in die Realität umsetzen. Zum Beispiel bekommt man also erklärt, was eine Variable ist, wie die Syntax aussieht und was man damit alles so machen kann. Nachdem man es sich durchgelesen hat, soll man selber im angeschlossenen Editor eine Variable initialisieren, sie belegen oder ändern.

Dadurch nimmt man das abstrakte Konzept direkt in die Hand, setzt es um und kann direkt nachvollziehen ob man es verstanden oder nicht. Bei der zweiten Übung geht es dann um Schleifen. Dort muss man also seine Wissen der Variablen mit reinbringen, aber auch das neue der Schleifen anwenden.

Wozu führt das nun?

Man sitz nicht vor einem großen Haufen an Code Beispielen, wo es verlangt wird mehrere Konzepte und Eigenarten gleichzeitig zu verstehen.
Durch die direkte Anwendung dessen findet schon eine Transferleistung statt. Man muss sich direkt damit auseinandersetzen, was eine Schleife ist und überliest es nicht einfach.
Wenn man diesen Prozess 2-3 durchgemacht hat, erhält man eine gute Einschätzung, wie man selber in Teilaufgaben und Konzepte unterteilt.

Und damit können wir wieder den Bogen nach oben machen. Dokumentation und Büchern. Die gleiche Methode kann man nämlich auch dort anwenden, man kriegt sie nur nicht so schön vorgekaut. Auch Bücher und die meisten Dokumentation gehen abschnittsweise und Konzept für Konzept durch. Anstatt aber nun diese nur stur zu lesen oder in zu großen Code Beispielen reinzuspringen, können wir uns währenddessen eine kleine Zusammenfassung schreiben. Nichts großes, nichts wildes. Es soll kein Lehrbuch werden. Der Clue ist aber: Wir copy & pasten uns nicht einfach die Beispiele, sondern schreiben unsere eigenen. Sei es, dass wir einfach die Variablen Namen ändern.

class Car {
    constructor(horsepower, doors, buildYear){
    this.horsepower = horsepower
    this.doors = doors
    this.buildYear = buildYear
    }

    get info(){
        retun `The Car has ${horsepower} horsepower and ${doors} doors. It was build in ${buildYear}.`
    }
}

const car = new Car(200, 4, 2019)

Würde zum Beispiel im Buch stehen. Darauf aufbauend übertragen wir das in meinetwegen einem Cheat-Sheet als

class Cat {
    constructor(name, pawPower, birthYear){
    this.name = name
    this.pawPower = pawPower
    this.birthYear = birthYear
    }

    get info(){
        retun `This is ${name}. ${name} has ${pawPower} paws and was born in ${birthYear}`
    }
}

const cat = new Cat(200, 4, 2019)

Im Grunde, steht da das selbe. Da wir uns aber Gedanken machen, ob jetzt pawPower wirklich so sinnvoll ist, machen wir uns gleichzeit mit Gedanken über constructor, this. und get info(){}. Wir möchten ja schließlich sinnvolle Beispiele und keine die nur für sich stehen.

Der letzte Schritt

Baue dinge! Die letzten Übungen zu einem Thema bestehen im FreeCodeCamp immer daraus selbstständig Dinge zu bauen. Das muss nichts großes oder außergewöhnlich sein. Vielleicht ist so gar ganz sinnvoll etwas umsetzen dessen Algorithmen und Datenstrom man schon verstanden hat. So kann man sich voll und ganz auf das Framework konzentrieren.

Zusammengefast

Breche Frameworks und Sprachen in kleine Teile auf
Gehe eins nach dem anderen durch.
Schreibe selbst die banalsten Code Beispiele noch ein mal mit eigenen Gedanken auf
Setze deine gelernten Fähigkeiten direkt in die Praxis um

Vielen dank fürs ~~Leben~~ lesen, falls ihr darüber weiter quatschen möchtet, haut mich auf Mastodon, Twitter oder per Mail an!

What the Day? (German)

KurzGedanke — Tue, 08 Jan 2019 10:52:53 +0000

Es ist Tag 1. Es ist Tag 2 … es ist Tag 4 und der Congress ist für die meisten Menschen um. Doch.. was kommt danach? Tag 5? Tag 6? Ich wusste es nicht.
Weihnachtsfeiertage und der Congress haben diese unangenehme Eigenschaft das Zeitgefühl komplett zu zerschießen. Das ist durchaus sehr angenehm, aber durchaus auch schwierig wieder zu finden wenn man sich nicht aktiv dafür entscheidet.
Long Story Short: Ich habe einfach mal Vorlesungen verpasst, weil ich der festen Überzeugung war es wäre Mittwoch und nicht Donnerstag. Das war gar nicht mal so angenehm. Aus der Frustierheit überkam mich die Idee meines Lebens. Ich schreibe einen Mastodon Bot.

What The Day?

What the day? ist ein Mastodon Bot der alle zwölf Stunden, jeweils um 08:00 Uhr und 20:00 Uhr den Aktuellen Wochentag, das Datum und die Uhrzeit postet. Er ist Open Source und man kann ihn auf GitHub finden.

Wie ist er geschrieben?

Ich war sehr überrascht wie einfach es ist Mastodon Bots in Python zu schreiben. Im Grunde nutze ich zwei Librarys. Ein mal mastodon.py und schedule. Mastodon.py ist einfach eine Python API Wrapper für Mastodon und das hier all der Code den es benötigt um einen Post zu verfassen.

def post():
    '''
    Login for Mastdon and tooting a toot with the current weekday, date and time.
    '''
    weekday = time.strftime('%A')
    dateDMY =time.strftime('%d/%m/%Y')
    clock = time.strftime("%X")

    mastodon = Mastodon(
        api_base_url = 'https://botsin.space/',
        access_token = cred.accessToken
    )
    mastodon.log_in(
        cred.email,
        cred.password,
    )
    mastodon.status_post('Today is {}, the {} and it is {} o\'clock!'.format(weekday, dateDMY, clock), visibility='unlisted')

Die ersten drei Variablen, weekday, dateDMY und clock dienen hier jeweils dazu den aktuellen Wochentag, Datum und Uhrzeit zu bekommen.
Dadrunter findet die Anmeldung bei Mastodon statt, wobei cred.$ auf ein weiteres .py file verweist um meine Anmeldedaten aus Git raus zu halten.
Bei mastodon.status_post() ist das Argument visibility='unlisted' noch relevant, da es eher ungerne gesehen wird, wenn Bots auf die Lokale Timeline poste. Auch wenn mein Bot auf https://botsin.space/ läuft, möchte ich mich dieser “guten Sitte” anschließen.

def main():
    '''
    Runs the schedule for the toots at 8 o'clock and 20 o'clock.
    '''
    schedule.every().day.at('08:00').do(post)
    schedule.every().day.at('20:00').do(post)
    while True:
        schedule.run_pending()
        time.sleep(1)


if __name__ == "__main__":
    main()

Der letzte abschnitt ist die main Funktion mit der schedule library, die auch recht eingäning zu lesen und zu nutzen ist.

Im Grunde habe ich hier also einen funktionieren Mastodon Bot in knapp 40 Zeilen. Wenn das mal keine Motivation ist, selber einen zu schreiben, dann weiß ich auch nicht.

Zum Schluss läuft der Bot auf einem Raspberry Pi der hier bei mir Zuhause steht. Da ich von Docker und systemd nicht all die große Ahnung habe, habe ich mich bei diesem Ask Ubuntu Eintrag bemüht und den Befehl nohup gefunden, womit der Bot nun ganz gemütlich im Hintergrund läuft. Leider werde ich bei einem Neustart des Pi den Bot ebenfalls Neustarten müssten. Vielleicht investiere ich da mal ein wenig in Docker oder systemd.

Falls ihr noch Fragen dazu habt, könnt ihr mich gerne auf Mastodon kontaktieren. kurzgedanke@chaos.social

Ansonsten wünsch ich euch noch viel Spaß beim eigenen Bot schreiben und um das aktuelle Datum nicht zu vergessen folgt @whattheday@botsin.space!

[GERMAN] Bear of the Day - Pseudo Tabellen mit Markdown und Code Blocks

KurzGedanke — Tue, 01 May 2018 12:57:18 +0000

Dieser Tipp funktioniert leider nur eingeschränkt am Mac, da in der iOS (iPhone) Darstellung durch den kleinen Screen und Line Wrapping durcheinander gebracht wird. :(

Zum jetzigen Zeitpunkt (15.04.2018) besitzt Bear for iOS (App Store Link) und Bear for Mac OS (App Store Link) leider nicht die Möglichkeit Tabellen darzustellen.

Nun habe ich aber dennoch den Schritt gewagt und werde vollständig zu Bear umziehen, gerade da ich für mein Informatik Studium so wenig Ballast (verschiedene Apps) nutzen möchte.

Als ich meine .md Datein in Bear von iA Writer kopierte viel mir auf, dass meine Tabellen natürlich komplett durcheinander geraten sind. Da ich aber wusste, dass die gut formatiert waren überlegte ich diese einfach in ein Code Block zu packen.

Code Blocks erzeugt man wie oben im Bild zu sehen mit drei Gravise, einfach Wikipedia Link.

Ich finde sie sehen brauchbar und gut lesbar aus, auch wenn diese Möglichkeit wahrscheinlich an ihre Grenzen läuft, wenn man wirklich lange Tabellen aufstellen möchte.

In der Hoffnung, dass die Entwickler von Bear nun aber die standart Markdown Implementation von Tabellen nutzen werden, werd ich einfach so bald diese erschienen ist, die Code Blocks von den Tabellen entfernen und hoffentlich dann wunderschön aussehende Tabellen haben.

Falls ihr weitere Ideen für ein Bear of the Day habt, vor allem wie ihr so mit Mathematischen Formeln umgeht, schreibt mir, @KurzGedanke, doch einfach ein Tweet und lasst es mich wissen. 😊

Beginner: Web Scraping in Mostly Pure Python

KurzGedanke — Thu, 30 Nov 2017 18:39:09 +0000

I love web scraping, especially in the beginning of learning how to code. It is fairly easy, you can learn a lot about how to handle data and you get immediate results!

But I see a lot of tutorials which get overly complicated and focuses mainly on a framework called Beautiful Soup. It is a fantastic and mighty framework but most of the time - and especially for a beginner - it is completely over the top. Let's be honest, we don't want to index a complete website, most of the times we just want to download images or ask for a few values.

This can be done a lot of easier with one magic word, Regular Expressions.

Okay, okay, I hear you "whaaat? Regular expressions and easy? WTF?"

Yeah, you are not wrong, RegEx aren't that easy. Personally I found it much easier to learn RegEx than an arbitrary framework which has only one use case.

What are regular expressions?

The concept of regular expressions occurred in the 1950s. In theoretical computer science it is a sequence of characters that define a search pattern. (Wikipedia)

So, what does a regular expression looks like?

Imagine we have a string:

Hi, I'm KurzGedanke and www.kurzgedanke.de is my website.

Now we want to get the website with the specific domain. We can assume that every input looks like www.websiteName.tdl.

One solution to match this with regular expressions might be looking like this:

www\.(.*)\.([a-zA-Z]*)\s

www as you might suspect, this matches exactly www
\. matches the . after the www. Because the dot has a function in RegEx we need to escape it with the \.
(.*) the . matches any single characters. Is it the a or a tab, it will match it. Besides of newlines. With the asterisc we match zero or more characters of the expression before it. In this case zero or more of any single character. The parentheses () puts the match in a group which can be accessed easily.
\. this dot matches the dot before the top level domain.
([a-zA-Z]*) here we have the top level domain, which is put in a group again with the (). [] are used to match a single character. In this case a character between the lower a to the lower z or the capital A to the capital Z. To get more than a single character the * is used.[^This is funny and a classic mistake. I didn’t thought it through completely. A URL can of course contain a dash - and I missed it.^^]
\s matches white space. In this case it is used to end the regular expression.

To be honest, I think there are smarter ways to do this, but I find this way easy to see what’s going on and not to get overwhelmed by a 50 character long RegEx string.

To learn regular expressions I used an interactive tutorial like this: regexone.com. This is not the only one out there and you can look if you find one that suites you.

Another great tip are sites like regex101.com. You can paste text in it and write directly your regex while you can see in realtime which parts are matched.. I use it everytime when I write some regex.

Lets write some python

We can use this knowledge to scrap websites. And... to be honest... I will rely on a module called Requests: HTTP for Humas. But this module is so easy to handle and pythonic - sometimes I have the feeling it is more pythonic than python itself.

Our goal is to scrap my website and get every article title of my landing page, as well as the link to it.

A simplified version of the HTML looks like this:

<div class="post-list">
  <article class="post-preview">
    <div class="post-preview-heading">
      <h2><a href="https://kurzgedanke.de/post/headless-ssh-and-wifi-on-raspberrypi/">Headless ssh and Wifi on RaspberryPi</a></h2>
    </div>
    <hr>
  </article>
  <article class="post-preview">
    <div class="post-preview-heading">
      <h2><a href="https://kurzgedanke.de/post/how-to-encrypt-files-with-aes/">How to Encrypt Files with AES</a></h2>
    </div>
    <hr>
  </article>
  <article class="post-preview">
    <div class="post-preview-heading">
      <h2><a href="https://kurzgedanke.de/post/problems-with-flask-and-pycharm/">Problems with Flask and PyCharm</a></h2>
    </div>
    <hr>
  </article>
  <article class="post-preview">
    <div class="post-preview-heading">
      <h2><a href="https://kurzgedanke.de/post/decentraland-hot-to-mine-on-a-mac/">Decentraland | How to Mine on a Mac</a></h2>
    </div>
    <hr>
  </article>
  <article class="post-preview">
    <div class="post-preview-heading">
      <h2><a href="https://kurzgedanke.de/post/welcome/">Welcome</a></h2>
    </div>
    <hr>
  </article>
</div>

So, what are we looking for in this HTML? Let's see, we want the titles and the url of all posts. We have a few articles with the class post-preview. And down below we have a h2 heading inside a div called post-preview-heading. The h2 contains a a href which assembles a link. Might be good to go! Every h2 has the same structure and, we are lucky, this is the only h2 with this structure on this whole side. So we can assume, like above, that every input looks exactly like this:

<h2><a href="linkToPostTitle">postTitle</a></h2>

On other websites the h2 or the a href would have a dedicated class or id like

<h2 class="post-preview-title-header"></h2>

this is even better because we would have a persistent pattern which could be used to match against.

Now let us write our RegEx to search for.

<h2><a href=\"https:\/\/kurzgedanke\.de\/post\/

This simply represents the <h2><a href="https://kurzgedanke.de/post/ string. Again the backslashes as well as the double quotes have to be escaped.

Note: You can leave the escaping of the double quotes out when you use single quotes in your python code. But escaped double quotes are always the safe option.

Now the rest:

<h2><a href="https:\/\/kurzgedanke\.de\/post\/(.*)\/">(.*)<\/a><\/h2>

(.*) selects everything after the post/ till the /"> and puts it in a group.
2. (.*) matches the post title
<\/a><\/h2> closes of the </a> tag and the </h2> tag.

Now that we've written the regular expression let's take a look at the python code.

import re
import requests


r = requests.get('https://kurzgedanke.de/')

regex = r'<h2><a href="https:\/\/kurzgedanke\.de\/post\/(.*)\/">(.*)<\/a><\/h2>'
titleURL = re.findall(regex, r.text)

for urlAndTitle in titleURL:
    print(f'Title:\t {urlAndTitle[1]}')
    print(f'URL:\t https://kurzgedanke.de/post/{urlAndTitle[0]}/')
    print('-------------------------------')

import re imports the regular expression module from the standard library
import requests import the requests module from Kenneth Reitz.
r = requests.get('https://kurzgedanke.de/') makes an HTTP request to kurzgedanke.de and safes the data in a requests object.
regex = r'...' declares a variable with the regular expression as a value. r'...' tells python that this string is a regular expression.
titleURL = re.findall(regex, r.text) we use the regex module to find all matches with the use of our regex variables and r.text which contains the html of our http request. After everything is found it will be a list with all matches assigned to titleURL.
for urlAndTitle in titleURL: we can easily iterate over the list and access the different matches with an array notation because we grouped them up in our regular expression with the ().

When you run the script it should look like this:

Title:   Headless ssh and Wifi on RaspberryPi
URL:     https://kurzgedanke.de/post/headless-ssh-and-wifi-on-raspberrypi/
-------------------------------
Title:   How to Encrypt Files with AES
URL:     https://kurzgedanke.de/post/how-to-encrypt-files-with-aes/
-------------------------------
Title:   Problems with Flask and PyCharm
URL:     https://kurzgedanke.de/post/problems-with-flask-and-pycharm/
-------------------------------
Title:   Decentraland | How to Mine on a Mac
URL:     https://kurzgedanke.de/post/decentraland-hot-to-mine-on-a-mac/
-------------------------------
Title:   Welcome
URL:     https://kurzgedanke.de/post/welcome/
-------------------------------

I hope you found this little write up useful and learned a bit.

If you have any question or remarks, please leave a comment, contact me on twitter or write a mail.

You can read this post as well on kurzgedanke.de.

How do you write your code?

KurzGedanke — Tue, 28 Nov 2017 10:18:57 +0000

I don't know how to describe it well, so let me just start and you get an impression of what I mean.

When I start writing a program or a script I asks myself, what it should do and what is necessary for it. Then I gather my material of frameworks or new things I would like to test out. My next step is to open up my text editor and lay out the basic function and classes I might need. From these classes and function I pick the one which is most important. For example I need to scrap some website, so I write the scrapping function first, because without it everything else would be useless. I debug these function till they work and go to the next higher function. At the end I write the interaction with the user.

Do you have other approaches like writing the whole script in one go and then start to debug it and if so, why do you do it this way? Does a design pattern like Model-View-Controller interfere or forces you to write your code in a specific style?

I'm excited for your answers!

Headless ssh and Wifi on RaspberryPi

KurzGedanke — Wed, 01 Nov 2017 14:57:30 +0000

SSH:

To enable SSH on a RaspberryPi with out a monitor, keyboard or mouse put your SD-Card in a card reader and plug into your main PC.

Open up a terminal and navigate to the SD Card.

# On Mac:
╭─loki@lokiTheGod ~
╰─$ cd /Volumes
╭─loki@lokiTheGod /Volumes
╰─$ ls
BOOTCAMP MACINTOSH HD Untitled boot

Now you are in the Volumes folder, which shows all drives connected to your mac. You have to create an empty ssh file on the Pi SD-Card.

╭─loki@lokiTheGod /Volumes
╰─$ cd boot
╭─loki@lokiTheGod /Volumes/boot
╰─$ touch ssh

Enter cd boot to go into the Pi SD-Card and then type in touch ssh to create an empty ssh file.

You can verify this by typing ls in your terminal.

WiFi:

Personally this approach didn’t worked for me… so the easiest way to it is via Ethernet.

To enable WiFi directly on your headless Pi place a file name wpa_supplicant.conf in the boot directory of your Pi.

The wpa_supplicant.conf is moved while the Pi starts to /etc/wpa_supplicant/wpa_supplicant.conf where the the wpa configurations are located.

A simple and for most networks sufficient wpa_supplicant.conf looks like this:

WPA:

network={
    ssid="YOUR_SSID"
    psk="YOUR_PASSWORD"
    key_mgmt=WPA-PSK
}

WPA2:

network={
    ssid="YOUR_NETWORK_NAME"
    psk="YOUR_NETWORK_PASSWORD"
    proto=RSN
    key_mgmt=WPA-PSK
    pairwise=CCMP
    auth_alg=OPEN
}

For more information on this you can look at the Arch Wiki WPA supplicant site (Link).

Have lot of fun with your Pi!

How to Encrypt Files with AES

KurzGedanke — Wed, 13 Sep 2017 09:49:24 +0000

In times of mass surveillance, public Wi-Fis and a lot of bad people trying to steal your data you want to encrypt your data before you send them over the internet.

This is possible with something called OpenSLL and AES. AES is a cryptological cipher to encrypt your data, OpenSSL is a suite with cryptological stuff in it for you to use. OpenSSL should be preinstalled on all *nix operation system.

Let’s start:

On Mac open your terminal with the spotlight search and entering terminal. Hit enter to start it up.

You need to navigate to the folder where the file, you want to encrypt, is located. In my case this is the Desktop. If you want to know more about navigating the terminal, here is a link to a tutorial.

Of course, you can just copy the commands, but without the $. This indicates just a line you can enter in the terminal.

$ cd Desktop/

To show what files you have on your desktop you can use the ls command.

$ ls
very_important_file.txt

You can see, I have a very_important_file.txton my desktop, which I want to encrypt before I send it to my friend. To encrypt this file you can use the following command:

$ openssl aes-256-cbc -a -salt -in very_important_file.txt -out someRandomName.enc

enter aes-256-cbc encryption password:
Verifying - enter aes-256-cbc encryption password:

It asks you now for a password. You should use a real strength and long password and communicate it to a safe channel. And if you ask, the internet, even with a super fancy encrypted messenger, is not a safe channel. Let’s shortly break up the command.

openssl is the cipher suite I mentioned earlier.
aes-256-cbc is the encryption cipher. An aes with 256 key in cbc mode.
-a is optional and is used for a base64 encoding which enables you to look at the file in a text editor.
-salt adds a nonce to the encryption and makes it even stronger
-in tells OpenSSL which file it should encrypt
-out tells OpenSSL what the name of the output file should be. You should use a random name without an extension so no one can guess the underlying file type.

If your friend wants to decrypt the file he/she can use the following command:

$ openssl aes-256-cbc -d -a -in someRandomName.enc -out very_important_file.txt

enter aes-256-cbc decryption password:

Your friend is of course asked for the password to decrypt the file. But let’s break down this command as well.

openssl is the cipher suite I mentioned earlier.
aes-256-cbc is the encryption cipher. An aes with 256 key in cbc mode.
-d tells OpenSSL to use decryption, not encryptipn.
-a tells OpenSSL that the file was base 64 encoded. If you left the -a out by the encryption, you have to leave if from the decryption out aswell.
-in tells OpenSSL which file it should decrypt.
-out tells OpenSSL the output name of the decrypted file.

Please keep in mind that this is just an encryption. The file could be altered on its way through the internet by an attacker.

Problems with Flask and PyCharm

KurzGedanke — Wed, 06 Sep 2017 11:35:44 +0000

I started a new Flask project and coded it in VisualCode and a Terminal. Therefore, I set up my virtual environment, installed Flask and started to code after the Flask Quistart.

The code looks like this:

from flask import Flask
app = Flask( __name__ )

@app.route('/')
def hello_world():
    return 'Hello, World!'

Then I ran the app with:

$ export FLASK_APP=hello.py
$ flask run
 * Running on http://127.0.0.1:5000/

Because of the great support for Web Apps I decided to switch to PyCharm. I imported the project into PyCharm, set the Interpreter to the virtualenv, but when it hit run nothing happend….

If you have the same problem: Feel welcome, I’ve got the solution!

Create a New Project, choose the Flask Template and select your existing flask project folder. Say yesto the pop-up which asks you to create a project from existing source.

Your project should open now and you can change your intepreter in the settings to your virtualenv or whatever you desire.

If you try to run the app now you should see something like this:

I tried everything but the solution is damn simple… add this at the end of your code:

if __name__ == ' __main__':
    app.run()

and your console should output * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit).

If you want to know more about the if __name__ == ' __main__': line I can recommend this Video from Corey Schafer.

Thank you for reading!