Mobile First

Multiple studies show that more people surf the internet via their mobiles than from a desktop PC. According to Stone Temple research from 2017:

  • The percentage of visitors that use their mobile devices to surf the internet increased from 57% to 63%.
  • The time spent on the Internet via mobile devices also increased from 40% to 49%.

In 2019 (as well as in 2018), more people will switch to mobile devices to access the Internet. Therefore, optimizing a website for mobile users is the next goal of all web designers, developers, and other related personalities.

Source: templatemonster

 

On https://search.google.com/test/mobile-friendly

you can easily check if your website meets the requirements.

Feature Queries und CSS Grid

Über ein Feature Query lässt sich bestimmen, wann die CSS Grid Regeln im Stylesheet zur Anwendung kommen sollen.

IE Edge unterstützt CSS Grid, jedoch nicht vollständig. Deshalb empfehlt Morten Rand-Hendriksen folgende Feature Query:

 

Quellen:

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

https://mor10.com/wceu2017/

 

Important extensions for creating a template with typo3

If you want to build your own template it is good to install these extensions:

  • vhs
  • flux
  • fluidcontent
  • fluidpages (works with 8.7.15)

If you run into any issues, delete the extension and install the development version, which you can pull from github.

Then install the builder extension, to create a template skeleton.

 

install Typo3

One simple way to install typo3, besides others:

  • open your terminal window
  • cd to your web directory (e.g. htdocs)
  • create a directory and cd into it:
    mkdir typo3
    cd typo3
  • use wget to fetch the typo3 package:
    wget get.typo3.org/8.7 -O typo3_src-8.7.x.tar.gz
  • use tar to unpack the package:
    tar xzf typo3_src-8.7.x.tar.gz
  • remove the installation file:
    rm typo3_src-8.7.x.tar.gz
  • create a ‚public‘ directory and cd into it:
    mkdir public
    cd public
  • create symlinks:
    ln -s ../typo3_src-8.7.15 typo3_src
    (make sure, that this symlink points to the right source folder in the parent directory: typo3_src-8.7.15 or typo3_src-8.7.13, depending on the typo3 version you have fetched)
    ln -s typo3_src/typo3 typo3
    ln -s typo3_src/index.php index.php
  •  copy the .htaccess:
    cp typo3_src/_.htaccess .htaccess
    (on an Apache web server)
  • create a FIRST_INSTALL file:
    touch FIRST_INSTALL

Now create a database and switch to your browser and open your typo3 website. Then just follow the install instructions.

One might run into several requirements issues which I will describe in another tutorial.

Remove google fonts from Divi Theme

I tried several ways to remove google fonts from Divi like described here:

„https://technumero.com/remove-google-fonts-from-wordpress-theme/“

or here:

https://gist.github.com/mkrdip/f165408f23e2c645161b

But I did not get them to work.

Divi adds the google font with the function

And one can remove a function from a parent theme in a child theme with the remove_action() function from wordpress. So I added the following code to the child themes function.php:

And that worked!

I found this solution at:

https://code.tutsplus.com/tutorials/a-guide-to-overriding-parent-theme-functions-in-your-child-theme–cms-22623

To make use of web fonts it is best to host them on your own server. You can find many fonts and a description on how to use them here:

https://google-webfonts-helper.herokuapp.com/fonts

Add google maps to a page in wordpress

One can find a good description of how to implement google maps into a html page on google. But how can we implement a map in wordpress?

First we need a latitude and a longitude for our desired place which we can get from here or elsewhere: https://www.latlong.net/.

Then we need a google api key. If you do not have one already, here is how you can get it: https://developers.google.com/maps/documentation/javascript/get-api-key.

Now we can add a page, let’s say a contact page in our wordpress backend where we add a div with the id ‚map‘. In our style.css we can set a width, a height and a background-color for the map div.

With that done we need to add a map.js file e.g. in an assets folder in our theme or plugin. Here we can insert the initMap function described on google where we replace the lat and long with our data.

And finally we need to enqueue the map.js file and the external google api which can be achieved by using ‚wp_enqueue_script‚ like so:

The first statement ensures that the google maps functionality is only loaded on the contact page. For more info check WordPress Conditional Tags. Then two times ‚wp_enqueue_script‚ and finally the ‚add_filter‚ function with the ‚script_loader_tag‚ parameter adds the async and defer tags to the script tag.

This goes into the functions.php of our theme or to any appropriate place in our plugin. And that’s it.

Adding tags like defer or async to enqueued javascript

With ‚wp_enqueue_script‚ we can add external javascript to a page and with ‚script_loader_tag‚ we can change the output, which is very well described here: https://wordpress.stackexchange.com/questions/38319/how-to-add-defer-defer-tag-in-plugin-javascripts/38335#38335

With that it gets easy to add a defer and / or an async tag or any other desired attribute.

Link to an image

If you want to link to an image from within your theme folder, one way of doing so goes like this:

source:

Linking to an image folder within a WordPress theme

or:

 

Create and edit text files in the terminal

Create a new file:

source: https://www.wikihow.com/Create-and-Edit-Text-File-in-Linux-by-Using-Terminal

Working with vim

source: https://stackoverflow.com/questions/11828270/how-to-exit-the-vim-editor

To switch between editing and command mode in vim hit the ‚i‘ key to edit text (insert) or the escape key to enter commands which start with a colon, like :q.