During this year’s spring semester, I followed IT and Management course at University of Oslo. The course content involves IT platforms, how to bootstrap and govern them. While studying through academic network, Wikipedia becomes my best friend. However, Wikipedia or the rest of the internet does not have all the academic definitions for challenging terms. So, this question puzzled my mind for a while: What is generative technology?
Generative technology, as defined by Zittrain, is a technology that allows third parties to innovate upon it without any gate-keeping. The perfect example is the personal computer, which allows any type of third party to develop hardware or software to supplement or modify the original device. Further examples to generative technology are internet, Google Play and App Store.
There is an interesting question at this point: Even though telephony system is over 100 years old, why did it fail to evolve itself as a generative technology like internet did? This is because of the dummy terminal architecture of telephony system. Internet is built on end-to-end principle which lets the nodes of the web to flow data to given address, but the end points of internet has smart devices (computers) which can be developed further. However, telephony system is developed to take care of the management problems via its core components, and its end points are dummy devices. As a result, although both internet and telephony system did not have big changes on their core architecture or how they work in last 50 years, telephony system did not manage to expand itself as a generative technology, but internet is used overall.
Internet has been the major generative technology invention of 20th Century. However, artificial intelligence will surely become the next big generative technology of 21st. Its ultimate power will be unlocked when computers can design and code infrastructures for complex systems.
This error message bugged for two days. I’ve been working on a web application which is written in React+Typescript. My task is to create a Google Maps component without using any node module helper. So, I have to write most of the things from scratch and I had no former experience with Google Maps library. Before I tell more about my other concerns, let me introduce the error.
Description of the error
I experienced this error on Firefox meanwhile my web-app worked just fine on Chrome and Safari. When I tried to get predictions from Google Maps Api, Firefox showed me the following runtime error.
“ReferenceError: google is not defined” occurs on Firefox
Solution
The solution is simple! While I was adding my Google Maps API script, I forgot to add async and defer attributes. After adding these attributes, my component did not crash on Firefox. There are two ways of doing this:
1. You may include these attributes inside your index.html
2. Or you can add these values during Dynamic Loading process
BONUS TIP
Do not add Google Maps API script into the head of your html. It should be at the bottom of your body 🙂
When I heard this Git term for the first time from a colleague (who is English 💂), I thought it was a British idiom 🇬🇧. I even looked it up on urbandictionary.com, and I quickly realised that was an actual feature of Git. So, I had to teach this to myself. Then I googled “How to squash commits” and I ended up with a not very useful document on github. (https://github.com/wprig/wprig/wiki/How-to-squash-commits)
In very simple words, squashing your commits merges your several commits into a single commit. And there is no such “git squash blah blah” command either. We actually use “git rebase” command to achieve that. See the example case below to squash your commits 🙂
Example case
Assume that you have a development branch (called dev) and a feature branch (called my-pr-branch). The picture below lists my 4 commits which are on my-pr-branch.
By following the steps below, I will squash those 4 commits into 1 commit.
STEP-1
Make sure that you are on feature branch:
git checkout my-pr-branch
STEP-2
Run the command below:
git rebase -i HEAD~4
In my case, I will squash 4 commits. Therefore, I rebase HEAD~4.
STEP-3
Previous step will open your default text editor. See my case below:
STEP-4
Leave first line as it is and type ‘s’ for the first word of the other lines. As the comments also elaborate, ‘s’ stands for squash.
STEP-5
After you save the editor (:wq), you will be demanded to save the merge request. Just save and move forward:
We all know that feeling. You don’t have a concrete idea about the solution you are looking for and you want to see a quick answer for your question. So, check the short answer below:
Short answer to your question
Very short answer is a “NO”. Firebase PhoneAuthProvider does not deliver a resend SMS feature in its SDK for JavaScript developers (as of now, June-2019). It actually supports such feature for Android, C++ and Unity developers via PhoneAuthProvider.ForceResendingToken, but the same is not available for JavaScript developers. Therefore, if you’d like to create a “Resend SMS Verification” button for your web application, you should implement it yourself by initialising a new recaptcha session (like setting window.recaptchaVerifier etc…), using a separate recaptcha container (such as <div id=”recaptcha-container-resend” />) and eventually calling signInWithPhoneNumber(…) function again on user interaction.
Long answer to your question
The screenshot below shows you the documentation of Firebase services in various platforms. You may access the Javascript SDK reference by clicking the link below:
To implement a resend SMS feature on my ReactJS app, I went through this documentation. And I realised that there wasn’t any resend SMS support by Firebase.auth. Interestingly, there was no blog or stackoverflow ticket discussing the issue either. Then, I assumed that the developers, who came across with the same problem, silently implemented a resend SMS feature by simply re-initialising the whole process on their web applications. Therefore, I decided to break this silence by writing this post and helping future developers (and maybe even future self 🙂 ).
Assume that your application shows two components to the user. First component will receive the phone number from the user and after the SMS is sent, the second component will demand the user to type in the verification code.
Your first component should run following methods in order:
Initialize recaptcha
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(…);
Above is a rough sequence of the operations that you should follow and I believe you already know how these work.
When your application moves to the second component, you may wish to use the existing implementation (the functions in the first component) by passing the functions as arguments in React. However, this approach creates some trouble for the RecaptchaVerifier, because you already used the recaptcha session to send the first SMS and if your user attempts to send the SMS again, you will need a new recaptcha session. Plus, you will also need a recaptcha container in your second component as well. Recaptcha container is the place that grecaptcha-badge will be loaded in an iframe. In order to avoid these conflicts, I have implemented the same set of methods in the second component as well. And to prevent any other potential conflicts, I created a separate recaptcha-container with a new id.
First component’s container:
<div id=”recaptcha-container” />
Second component’s container:
<div id=”recaptcha-container-resend” />
So that, the user may resend SMS verification several times more as long as RecaptchaVerifier does not believe that the user is a robot 🙂
Other Tips
Always use forms
See the screenshot below from my web application. The user interface is in Norwegian 🇳🇴 🙂
Example User Interface for SMS Verification
We basically have one text box for the phone number and a submit button. So, this has to be implemented as a form, right? The picture below shows a simplified JSX code for this form:
A good practice is to place the recaptcha-container at the bottom of the form. So that, there will be no confusing accessibility issues for the blind people. Also, we initialise the sign in process via this.handleSubmit call. This approach provides an advantage for desktop users, because handleSubmit will allow triggering the recaptcha check by pressing [ENTER] button while the focus is on phoneNumberInput element (<input … />). As a result of these benefits, always use forms while implementing Firebase SMS Verification interface.
Watch out for unknown error states
PhoneAuthProvider gives you a list of error codes, but there is no documentation for all errors. (See documentation here.) One of these obscure errors is auth/code-expired. This error is triggered when the user enters the wrong SMS code three consecutive times.
Recaptcha window is not responsive
This is another unfortunate case with Firebase Recaptcha services. Captcha pictures presented inside the iframe have fixed width and critical recaptcha buttons become invisible and non-scrollable for the users with very small mobile screens (such as iPhone5). To fix this issue, I recommend using some media query on grecaptcha-badge CSS class. See the code below:
Media query for
The result is not perfect, but it keeps the iPhone 5 users in the game.
Use libphonenumber-js for formatting
If you’d like to format the phone number inside the text box (<input className=”phoneNumberInput” … />), libphonenumber-js is a great utility. You can apply required country code settings by simply adding 3 lines of code into your application. You can learn more about AsYouType formatter by the URL below:
Cloud Firestore is a NoSql database and this is my first time in Firebase world’s schema-less databases. This article should help to those who would like to get a grip on NoSql databases and who would also like to practice React programming further.
If you have no idea about NoSql databases, I recommend you to watch the video below:
What do we build in this tutorial?
Let’s have a vision of what we are actually developing here. The name of my application is show-cities-firebase and the whole source code is in my github repository. Besides, the app will have following features:
Connecting React app with Cloud Firestore database (Not Realtime Database)
Keep three attributes for each record
ID
City name
Population
List city names and corresponding population data
Sort the list by population
Delete specific city record
Delete all cities
Cloud Firestore Configuration
To start with, you need to include Firebase console access to your regular Google Account (same as gmail account). You may try to get it via https://console.firebase.google.com. And the same console address will help you follow your storage while we are working further. In other words, you will see your data collections under the console. See the GIF animation below to understand what I mean.
Checking out Cloud Firestore Collections on console
The next thing you should do is to set up your config input. You must fill in the content regarding your account credentials. I keep this info inside my fire.js file.
fire.js
And I eventually import the configuration file inside my App.js:
import fire from './fire';
As you see in the picture above, you also need database.rules.json and firebase.json files. Add them to your project as I did in github repository. And we are ready to pull and push data.
Insert City Data
See how the constructor code looks like.
I keep the cities as an array inside of the state and the cities array contains the required data fields such as id, city and population. I think sortASC attribute’s task is apparent and I initialise the app with maxID = -1 value. Firebase databases do not provide auto-increment feature like in MySql or Oracle databases. Instead, you should do this manually. Therefore, I need maxID to auto-increment ID value for new city records. When the app starts, this value is updated with the highest ID. I call the function below on componentDidMount().
updateMaxID will return -1 unless there is some data in my collection. However, if there are earlier city records, it sorts the collections in descending order and picks the first top one thanks to the line below:
let maxIdItem = dbCollection.orderBy("id", "desc").limit(1);
After explaining how I set up my application state, let’s see how to insert some data into our collection. Take a look at my render code:
The application basically has two textboxes – city and population. I use required keyword for data validation, because I do not want any record either without a city name nor population. In addition to that, we have a tiny button which triggers this.addCity() on form submit.
This is the function where we implement the auto-increment of ID. I refer to this.state.maxID and increment it by 1. After inserting my new record into Cloud Firestore, I call this.updateMaxID().
You must have noticed that population and city ID values are parsed to integer before sending them into the database. This is necessary for sorting implementations and if you do not specify the type of the data, Firebase will store those values as String. Moreover, unlike relational databases, Firebase does not apply strict type rules. Therefore, one record may store the population value as String and while the next one stores it as integer. This is legal in NoSql world 🙂
In the last two lines of this.addCity(), I simply reset the textboxes with empty string. See the sample use below:
Sample outputValidation example
Listing records
Since we are able to insert some records into our collection, we had better list them as well. To do that, I wrote a function called this.loadCities() which pulls the data into application state.
The function above does not render the records. Therefore, I wrote another function which lists the city data and it also handles the sorting operations – this.createCitiesTable().
I will skip the implementation of other features. You may try to implement the rest on your own as a homework. If you get stuck, the github repository is always at your service.
Last week, I went through the solutions of the first three tasks at tic-tac-toe game tutorial. This time, I will cover up the rest. Please see the list of tasks again:
Display the location for each move in the format (col, row) in the move history list.
Bold the currently selected item in the move list.
Rewrite Board to use two loops to make the squares instead of hardcoding them.
Add a toggle button that lets you sort the moves in either ascending or descending order.
When someone wins, highlight the three squares that caused the win.
When no one wins, display a message about the result being a draw.
If you’d like to take a look at the initial article, please check this one out.
Task #4 Add a toggle button to sort the moves
I must admit that I struggled with this task a bit, because I couldn’t make my mind whether I should reverse the history in this.state or in a copy of history array. After my first implementation, I realised that things get fuzzy when you mingle with the state quite often. Because, making changes in the state side-effects the other functions inside Game.js. So, I threw away my first code and followed a brand new plan.
To start with, we definitely need a new state attribute for the sorting choice. I added it to my constructor with default value ascending.
Add this.state.sortASC to the constructor of Game.js
We surely need a new function to toggle the sorting direction. This function will be called each time the user clicks on our sort button. So, I added toggleSort() inside Game component.
Add toggleSort() function
It is time to make some changes at rendering now. Since I do not want to reverse this.state.history, I get a copy of history and reverse it if sorting direction is descending. Also, please note that I also reverse the move value inside map(step, move).
Get a copy of history and reverse the copy
Next change inside the render creates our toggle button. I have been too lazy to add some SVG images and work on CSS. Therefore, I used UTF-8 arrows 🙂 And do you remember the toggleSort() function? This is a good time to use it.
Implement sortButton with an arrow
The last snippet is a piece of cake.
Add sortButton and use unordered list if you like
Ta taaa!!! Below is the outcome. If you’d like to see the commit, click here.
Tic-tac-toe game with sorting
Task #5 When someone wins, highlight the three squares that caused the win.
As we go further, the tasks become a bit more challenging. So, this implementation requires changes on all components. I will follow bottom to top approach. That means we will see the implementation sequence as following:
Square.js
Board.js
Game.js
Square component is called by Board and it is responsible of rendering the boxes. Assume that Square.js receives an additional prop parameter which is boolean. And this input helps rendering the given box with gray background color or not. See the code below:
Add winnerSquare className if the boolean is true
And we certainly make this minor change inside index.css.
index.css
After these changes, we are done with the Square component. The next stop is Board. Let us first establish our previous assumption for the Square. Consider that renderSquare() function will pass the boolean to the Square.
renderSquare should get a second input: winnerSquare
And our createTheBoard() function still calls the previous function inside two for-loops. Assume that we have a handy function which figures out if the current square box is a winner box. So, call it accordingly.
this.isWinnerSquare(arrayPos)
And it is time to keep our promises again. Implement isWinnerSquare(). But see that we again make a new assumption here. Assume that Board will receive the winner coordinates from Game.js. If the coordinates are null, boolean is false. If current square box position is one of the winners, boolean is true. Simple huh?
“If you can’t write it down in English, you can’t code it.” – Peter Halpern
Implement isWinnerSquare(…)
We are about to finalise the implementation. calculateWinner(…) knows which lines are the winner squares. Instead of returning the name of the winner, it’d better start sending an object which keeps both the coordinates and the winner name.
calculateWinner will send the coordinates and the winner name.
As the final touch, I edited the use of winner object and the result is astonishing 🙂 See the commit here.
When someone wins, highlight the three squares that caused the win.
Task #6 When no one wins, display a message about the result being a draw.
The last task is kind of easy. I see that the draw happens when all squares have some X or O value, but the calculateWinner function yet does not return a winner. So, I insert my check inside the if scope:
Game is a draw
If you are curious about the commit, check it here. And below is the final output of our tic-tac-toe game:
Enhanced version of tic-tac-toe game
As you see, the winner of the last game is neither X or O, because the real winner is YOU who puts effort to learn React.
Let me start the article with a cliché: Programming is learnt by practice. It is an oldie, but goodie. OK! I stop here. Two cliché for one article is more than enough.
Like many front-end developers, I also decided to take my chances with React and I wanted to push myself with some ambitious example where Firebase database and many other things involve, but after a while, I paused this project and aimed for some assisted tutorial.
At this point, I came across a tutorial on React’s official webpage. It is a tic-tac-toe game and the tutorial process goes quite smooth. The steps that you follow help you see the philosophy of React and shows you the way of doing things in a smart way.
Even though you only type what the mentor is asking you to do, this tutorial is still handy, because it gives you room to practice. And the exciting thing about the tic-tac-toe tutorial is the TO-DO list at the end of the lesson. These tasks encouraged me to enhance the game and I am currently down with the first three. See the full list of tasks below:
Display the location for each move in the format (col, row) in the move history list.
Bold the currently selected item in the move list.
Rewrite Board to use two loops to make the squares instead of hardcoding them.
Add a toggle button that lets you sort the moves in either ascending or descending order.
When someone wins, highlight the three squares that caused the win.
When no one wins, display a message about the result being a draw.
In this article, I assume that you have already followed the tutorial till the end and if you struggles with one of these tasks, I will share my solutions with you. Also, if you think my suggestion is not good enough, let me know how I can improve it.
Task #1 Display the location for each move in the history list.
As expected, we start with the simplest one. The challenging part here is to decide how column and row values should be stored and I hope you guess the answer already. Yes! We should create two new attributes inside this.state.history (Game.js). See the constructor below:
Adding row and col attributes
Certainly, that much is not enough. We should make some changes inside handleClick(…) as well. Each time a player clicks on the board, handleClick function is triggered. The changes below shows how we calculate the row and column values via array index.
Calculate row and column values
And we should also store the coordinate values for each move inside this.history.state. To do that, we make some modifications in history.concat(…).
Store the coordinates for each move
We are almost done. Currently, our tic-tac-toe game is able to save each move’s coordinates, but it doesn’t output to the user. Therefore, we will simply benefit those values inside the render.
That was it. If you’d like to check this commit, click here. And the gif below shows the current outcome.
Task #2 Bold the currently selected item in the move list.
Task number 2 challenged me a bit. It was actually easy to fix, but I didn’t feel peaceful after my first commit. I was sure that I should find my way through this.state.stepNumber, but my solution had some code duplication. See the first commit below:
My first commit for Task #2
As you see above, I compare the current move index with the stepNumber and add some CSS class inside the render. (selectedMove = fontWeight: bold) I apparently didn’t know what to do with the second <li> block. Also, this commit caused showing bold text on latest move as well. That wasn’t what I was expected to do. I should’ve shown the last clicked button with bold text, not the latest one all the time. See the result gif of the first commit:
The result of first commit
I got a better idea on the next day. Why not using a variable for the className? And also ignoring the CSS where history.length equals the current move number? I reorganised the code accordingly. See the commit here:
Task #2 – Improved solution
And the output is nicer 🙂 Now the move becomes bold only when the user clicks on it and the code has no redundant duplications.
Task #3 Rewrite Board to use two loops …
To solve this problem, I needed to get some help from Google, because I didn’t know how to return html code from a function. Let us remember how our Board.js rendering was implemented:
Rendering on Board.js
Apparently, the code snippet above does not promise any flexibility and it is a trap for typos. (It happened to me 🙂 See it here)
So, we clearly need a function inside Board.js to help render look tidy. Therefore, I wrote a new function called createTheBoard(). We go through the rows and columns to render the squares and at the end, an array of html content is returned. See the last commit here.
Shorter render means longer life 🙂
Conclusion
I highly recommend to start with the default tutorial page of React. For example, learning that “this.state should be considered as private to a React component that it’s defined in” was a huge enlightenment for me.
Tic-tac-toe tutorial will help you understand fundamental concepts of React world and it also gives you room for improvement. I will hopefully solve the following tasks (#4, #5, #6) soon and post it. Until then, ha det bra!
Php 7 Migration is still a hot issue for developers around the globe. Some host providers already completed the process, but many others are still lacking behind. Therefore, it is good to share some wisdom and technical tips that will help random PHP citizens around the world.
I see two major parameters that should be carefully considered in the beginning of this tough marathon and they are reusability + versatility.
Reusability
Everyone should agree the equation below:
Reusability = Time = Cost
We all wrote our PHP 5.0 code some time ago. Our frontend applications are built on top of it and those PHP programs worked fine in the dungeons of our CMS. Now, we have to change the architecture of the underground facilities, but remember! The old code provided the expected results and all we want is to keep it the same. Because, the old code is reliable and well-testet over time. Integrating the failing parts to the newer version of PHP is sufficient. As a result of these, we don’t aim for rewriting of classes, we aim for catching and fixing the integration issues. This is a search & destroy mission. Although this strategy failed in Vietnam War, but never mind.
Search & Destroy mission php 7
Versatility
This will be a long process for most of the developers and since you are working in short sprint cycles (say 3 weeks), at least half of your migration commits will be delivered to the production server which still runs on PHP 5.0. One may disagree with this approach by saying:
‘Nope, we will keep the migration commits on a different git branch and when all tests are complete and sufficient code coverage is reached, we will merge these two branches.’
The decision is certainly up to you, but I wouldn’t recommend this method. Because, there will be surely some conflicts after this big merge operation and the outcome will not be as reliable as you think. Therefore, I recommend to follow another path: Make sure that your fix commits works both on PHP 7.0 and PHP 5.0.
Do not merge your branches at the end of the process like Moses did
Fatal Error Examples and Solution Tips
EXP-1: “Fatal error: Uncaught ArgumentCountError: Too few arguments to function…”
We start with a popular one. You will see this error message when one of your php functions is using a default argument. See the example function below:
public function myFunction($array1, $array2) {
if (!$array2) {
$array2 = array();
}
return count($array1) + count($array2);
}
The simple php function above expects two arrays as arguments and it returns the sum of array sizes. myFunction will work fine on PHP 5 even though you pass only one array, but the same call will give a fatal error message on PHP 7. Because, PHP 7 does not automatically assign a relevant default value on undefined arguments like PHP 5 does. Therefore, we should edit the function as following:
public function myFunction($array1, $array2 = array()) {
if (!$array2) {
$array2 = array();
}
return count($array1) + count($array2);
}
By assigning an empty array to the second argument, we let the function run both on PHP 5 and PHP 7.0. The same error message will occur when the second argument is a string, integer or an object. Then, we should use the relevant default value in syntax. For example, empty string “”, 0 or NULL values can be used accordingly for default initialisation.
You may end up getting the same error on redundant argument declaration. For example, $array2 might be declared in the function signature, but it might be actually never used. Certainly, this is the simplest case. Just delete the redundant argument and get over with the refactoring.
EXP-2: “Deprecated Methods with the same name as their class will not be constructors in a future version.”
The error message above already explains a lot, but seeing an example code excerpt is definitely enlightening:
class CafPage extends myPage {
function CafPage($tid, $view_id, $title, $site) {
$this->myPage($tid, $view_id, $title, $site);
}
}
The error apparently triggers in the constructor. PHP 7 does not like using the same name on both the class and the constructor function. Therefore, the same function should be edited as following:
class CafPage extends myPage {
function __construct($tid, $view_id, $title, $site) {
$this->myPage($tid, $view_id, $title, $site);
}
}
This fix will run on PHP 5 and 7 without any issues. Remember: Versatility!
EXP-3: “Non-static method … should not be called statically in …”
I witnessed this error message in a function call similar to the one below:
It seems PHP 7 was not happy with :: reference on non-static methods. Therefore, I firstly initiated the caller object and triggered the runTemplate function by arrow object operator (->).
return (new UserdataHelper)->runTemplate('bla-bla.php');
And Eureka! It works!
Conclusion
Three example error messages are handled in this post. These are the frequent error types that I came across during our migration process. Above all, the sneakiest php errors are those which do not output a fatal error message. These issues usually occur when an ajax call refers to a php function and they are harder to find out. So, most secure testing method is of course validating the expected functionality of your web-application.
I’ve been working on a SPA which is built in Node.js and since, my team does not deliver products in native app programming, we use Cordova Apache to build the same product as an iOS app. This approach certainly helps us gain in time, but some deep problems are more difficult to handle. Because, one cannot edit constraints through Cordova platform and hence, some parts of the application remain as black-box for us. Such disadvantage causes trouble when we are not sure about the diagnosis of a defect. Just like the error log below:
Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.
2018-10-16 15:24:25.691893+0200 Unibok[70880:8601663] [LayoutConstraints] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
Try this:
(1) look at each constraint and try to figure out which you don't expect;
(2) find the code that added the unwanted constraint or constraints and fix it.
(Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)
(
"",
"",
"",
"<NSLayoutConstraint:0x600003509130 'UIButtonBar.maximumAlignmentSize' _UIButtonBarButton:0x7f861b9324d0.height == UILayoutGuide:0x600002f05c00'UIViewLayoutMarginsGuide'.height (active)>",
"<NSLayoutConstraint:0x600003542850 'UIView-bottomMargin-guide-constraint' V:[UILayoutGuide:0x600002f05c00'UIViewLayoutMarginsGuide']-(9)-| (active, names: '|':_UIButtonBarStackView:0x7f861b948b10 )>",
"<NSLayoutConstraint:0x600003543070 'UIView-topMargin-guide-constraint' V:|-(10)-[UILayoutGuide:0x600002f05c00'UIViewLayoutMarginsGuide'] (active, names: '|':_UIButtonBarStackView:0x7f861b948b10 )>"
)
Because of the failure above, the keyboard on iPhone or iPad was not usable. Whenever the user touched on a textbox item (<-input->), the application actually triggered the keyboard interface, but the fail above conflicts some constraints and it crashed the keyboard. That was all about the fail.
I spent enough time thinking if this issue was related to some keyboard plugin like many people recommended. (ionic-plugin-keyboard vs. cordova-plugin-keyboard) But the solution was simpler than I thought and our implementation was more innocent than I doubted 🙂
SOLUTION
Recent radar ticket below opened the doors of clarification for me.
As Brent Dearth mentions in the comment, the entire defect was related to a fail in iOS 12.0. And the workaround is to remove your viewport-fit meta tag. The bold text shows the troubled code in my case:
Stork's Nest 