DEV Community: Tobias Röder

Mockups

Tobias Röder — Fri, 16 Oct 2020 20:27:21 +0000

Today I want to share three cool free mockup websites.

1. mockup.photos

On this Site you can simply create mockups for a lot of different cases. And you can't pay for mockups, you only have to create an account.
Go to Website

2. smartmockups.com

Here you can create mockups easy as well, without creating an account. The common basic mockups are for free. But there are also premium (paid) mockups too.
Go to Website

3. mockuphone.com

For those how only want to create phone/device mockups with transparent background, this website is perfect for you.
Go to Website

PHP localhost everywhere on macOS

Tobias Röder — Wed, 04 Mar 2020 19:13:47 +0000

Als ich mal nach irgendwelchen Browser Erweiterungen suchte um kurz mal eine PHP Datei auf dem Desktop zu testen, wurde ich nicht wirklich fündig. Jedoch ist dies einfacher den je. Und zwar mit einem einfachen Befehl im Terminal:

php -S localhost:3000 -t /rootpath/to/your/folder/

Das ganze hat mehrere Vorteile. Der Port kann selbst bestimmt werden, es können mehrere localhosts gleichzeitig genutzt werden und man hat im Terminal so etwas wie eine log Datei.

Ich hoffe, ich konnte weiterhelfen und über Feedback würde ich mich sehr freuen.

Mobile Phones 100vh issue

Tobias Röder — Tue, 25 Feb 2020 20:41:32 +0000

In diesem Blog wird kurz erklärt, wie man auf dem Smartphone das 100vh Problem lösen kann.

In diesem Codepen Beispiel ist ein Lösungsweg, wie man die '100vh' Höhe in einem mobile Browser mit CSS einstellt.

Kurz erklärt: das am übergeordnetste div Element, in diesem Beispiel #app, wird mit der Hilfe von position: absolute und top: 0; right: 0; bottom: 0; left: 0; auf die komplette Größe in der Breite als auch in der Höhe der Browsers gesetzt. Das ist wie die Höhe auf 100% zu setzten.

iPhone Safari – fixed background image

Tobias Röder — Wed, 08 Jan 2020 10:18:39 +0000

In this blog post I will explain how to make your background image fixed in the Safari browser on an iPhone

In this Codepen example you'll find a solution how to make the background image fixed in the Safari browser on an iPhone only with CSS.

Shortly explained: for the background image we'll be using an <img>, fixing it with the help of postition: fixed and to ensure to be behind the default level we'll set z-index: -1. With the help of top: 0, right: 0, bottom: 0 and left: 0 we say the image thanks to the postition: fixed that it has to be full screen. For more legacy support I will not use the new inset: 0. To make sure that the image will be the full background, we need so set the with and the height to 100%.For that it is required to use display: block because the <img> is not a block element by nature. Last but not least we set the object-fit: cover to get the typical unstretched full size background image.