Category: Uncategorized

At some point shortly before the launch of your new website, a technician will ask you to provide “access to the DNS admin panel” so that they switch on your new website.

In case you have access to your DNS admin panel: Forward those to your technical crew, they will create an A record with the domain name and the IP from your web hosting. That’s it!

If you don’t find any passwords anywhere: Here is how to find out where your DNS can be changed anyway!

Before we start recovering access to your DNS entries, here are three fundamental things for you to know:

1. Domain Registrar: A company through which you can “purchase” a domain. The domain registrar lets you connect a domain (i.e. acme.org) to your name servers.
2. DNS Service: A company that offers you a user interface for the name servers. You need a minimum of two name servers (example: ns1.acme.org and ns2.acme.org). A name server lets you manage DNS records for a domain. Example: The IP of your web hosting is connected to your domain through an “A” record. There can be many different DNS records, and there are many different types.
3. Web Hosting: This is where your website’s source code, database and media is stored. Your web hoster exposes your website to the public via an IP (example: 123.123.123.123). This IP you need to connect to your domain via a DNS entry.

Very often, one single provider integrates two or three of those services. That’s very convenient because it reduces the amount of accounts you need to remember credentials for. Some examples: On exoscale.ch you can host your website and manage your DNS entries but you cannot purchase the domain. Whereas on dnsimple.com you can register a domain and manage DNS entries however you cannot host your website.

That’s great but I don’t know anymore where my domain was registered or where my DNS entries reside!

Firstly, find out the top level domain’s whois service. Example: for .ch it’s Switzerland’s https://www.nic.ch/de/whois/. Make the whois query.

Case 1: You recognize the DNS servers! Find, recover or reset the credentials for the account on the DNS provider’s website, log in and create / change the DNS entry or entries.

Case 2: You recognize the registrar! Find, recover or reset the credentials for the account on that registrar’s website. Log in, if you can manage DNS entries there, then do it, otherwise set up an account with another DNS provider (we recommend dnsimple.com), create the DNS entries there and then change the name servers in the registrar’s account to those of your new DNS provider.

Case 3: You recognize the registrar, but as it turns out, the DNS account is under control by a different entity (such as a third-party service provider). You can either ask the third party to make the required changes or you could ask them to hand over the credentials to the DNS account or you can ask them to transfer the domain to your own account (for example dnsimple.com).

Case 4: You don’t recognize neither the DNS server’s domains nor the registrar’s name or address and you still can’t find any relevant credentials / passwords? Unfortunately you have nothing that proves that you should have permission to make those DNS changes. The only way for you is to find someone that does!

In general, it is not recommended to support Internet Explorer anymore. The cost of maintaining compatibility exceeds the benefits in many cases. Usage of Internet Explorer has dropped sharply over the last years and nowadays the percentage of website visitors that still use Internet Explorer on your website is likely very low.

Making a website work with Internet Explorer is costly. Internet Explorer lacks support for many website features and best practise web development approaches. In order to make a modern website compatible with Internet Explorer, workarounds and fixes specific to Internet Explorer have to be implemented. This requires extra efforts.

Here you can see the usage statistics for Switzerland (as of 2021). Internet Explorer is used by a mere 3% of website visitors on average, while Chrome, Firefox and Safari together cover 85% of all website visits.

Interesting fact: Even Microsoft themselves have become tired of Internet Explorer and have made moves to stop supporting the outdated software, for example in this blog post in August 2020.

👉 At what. we include Internet Explorer 11 compatibility in our offers as an optional item. This serves as an information for the client that by default the website wont be optimized for Internet Explorer.

What browsers should websites be optimized for in 2021?

At what. we have established the following compatibility policy:

The software is optimized for the following devices and browsers: 

- Chrome (Windows, Mac OS X, Android, iOS)
- Safari (Mac OS X, iOS)
- Firefox (Mac OS X, Windows)
- Microsoft Edge (Windows). 

Mobile Devices:
- Latest Google Phone (Standard Version) with the latest Android OS
- latest iPhone (Standard Version) with the latest iOS. 

The testing takes place on browserstack.com with the latest available operating system for a specific browser.

Open source projects are beautiful because everyone can work on them and contribute. If you are a team member of an open source project, it’s easy – you can just create your own branch, push that branch to the main github repository and create a merge request. If you are not a team member of the project, you can still contribute, but you have to copy (“fork”) the project first into your own account. Your copy is then magically linked to the original repository and you find yourself with three copies (the original one, the forked one in your github account and your local copy on your computer). The following instructions are intended to help you work across those three copies in an efficient way.

First, fork the upstream project on github.com into your own domain. Then get the clone URL from your newly forked repo in your domain, and clone the repo to your local environment:

git clone git@github.com:macolo/django-cms.git

Then add the upstream repository as second remote:

git remote add upstream git@github.com:django-cms/django-cms.git

Then switch to the upstream branch that you would like to eventually merge into:

git pull upstream develop
git checkout develop

OR

git checkout --track upstream/develop
git pull

From that fresh, up-to-date branch you can now create your own “feature” branch:

git checkout -B mario-test

Now you can make your changes on the mario-test branch (in an editor). Then show a list of your changes:

git status
git diff

If you are happy, then add the changes to the “stage”:

git add .

Check again (stuff has now turned green = added to stage)

git status

Now you are ready to prepare a commit:

git commit -m "speaking short description of the changes, also links to the issue will work magically"

You can create several commits locally.

You can now push this commit or commits on your local feature branch to your remote forked repo:

git push origin

Now you can go to github.com to your forked repo and create a Pull Request to a branch in your upstream repository, from your feature branch in your forked repo.

At some point in any career invariably one will be ask to test or review a web application (or an app). Most of them require logging in as different users with different roles. On top, web applications normally require users to validate their email address. Testers / reviewers using different profiles traditionally needed to use different email accounts, for each new user they create in the application.

Managing multiple email accounts is a lot of overhead and becomes cumbersome and frustrating quickly.

What if I told you that there is an easy way to have different email addresses that lead all to the same inbox and that you can achieve that with ZERO click per additional email address? Read on.

It’s very simple. Sign up for a free email account with Gmail.com, Google’s email service. Let’s assume you just created a new email address as such: joe.sixpack@gmail.com

Now about the “secret” part: Google delivers email to this inbox even if you change the email address slightly. After the username part of the email address (everything left to the @ sign) you can append a plus (+) and then you can use any combination of letters, numbers and minus (-) signs. For example joe.sixpack+1@gmail.com or joe.sixpack+test-user-1@gmail.com – It’s important to know that any email sent to an address such as joe.sixpack+test-user-1@gmail.com will be delivered to your joe.sixpack@gmail.com inbox!

That is very cool if you need to create different user accounts. Create just one gmail account and then sign up with the web application you would like to test using the trick above:

• joe.sixpack+advisor1@gmail.com
• joe.sixpack+user1@gmail.com

It’s important to consider that this little trick only works with gmail.com addresses. That’s it! Have fun testing / reviewing your web applications! 👋

Do you have a small business or just otherwise don’t have the budget to engage with a professional service provider or development team just yet? Then the following ways to get a decent website for free (or for cheap) might be for you.

A word of caution at the beginning: These website builders are quite rigid and simple. If you develop and grow your business you might soon find yourself in the situation where you’ll want to switch to a more powerful technology.

Squarespace

Squarespace is a cloud-based website builder. They support many different business types, for example they have templates for professional photographers but also for yoga studios.

https://squarespace.com/

Pricing starts at a couple of bucks per month. Of course, you can buy or connect a custom domain. Since it’s cloud-based you dont have to worry about hosting, it’s all included.

You can go here for a demo: https://www.squarespace.com/templates/irving-demo

Weebly

If for some reason you cannot warm up to Squarespace, you might want to try a good alternative: https://www.weebly.com/

Weebly is a bit cheaper, it comes at the monthly price of a cup of coffee (in Switzerland). It’s very similar to squarespace. They support your website building process by taking you through a step by step process which is a great help for absolute beginners.

Webflow

If you tried Squarespace or Weebly and say: These don’t work for me I need more power and flexibility! Then you might want to try Webflow. https://webflow.com/

Webflow is NOT for beginners though. There are many, many settings and it can be confusing even for a professional. Webflow has pre-made templates that look good and are easy to adapt, but the advanced settings are still lurking in the shadows and there is nothing that protects you from messing things up.

At the same time Webflow falls short of giving a professional developer or designer the possibilities to implement a custom design perfectly.

Bespoke Website

The above options are too lightweight for you?

Do you have a budget and are you looking for professional web design and development? Then we at what.digital would be happy to help. Please get in touch via hello@what.digital – we are looking forward to hearing from you.

Intro & Documentation

Before you post questions please make sure that you’ve read through the django CMS resources first:

• django CMS Intro for managers and editors – please also watch the video: https://www.django-cms.org/en/why-django-cms/
• First steps in django CMS for editors: http://docs.django-cms.org/en/latest/user/index.html

The django CMS Admin Interface – First Steps

• Admin Panel: The admin panel is where all functionality is accessible, it’s your starting point. You can always go to the admin panel by appending /admin to your domain (i.e. https://yourdomain.com/admin or https://your-website-1.eu.aldryn.io/admin
• Editing a page: You can go into Edit Mode on any page, by simply adding ?edit to any URL in the browser’s address bar. So if you are on https://yourdomain.com/some-page/ then you can append ?edit to the URL (https://yourdomain.com/some-page/?edit) and hit enter. You will then see a login screen unless you are already logged in and after that be able to double click on any part of the page to edit it directly.

Editor Best Practises

• Please read about Responsive Images and Safe Areas
• Please read about hyphenation
• Please read about handling images
• Working with videos in Content Management Systems

Why is this desirable? divio.com uses Amazon AWS S3 for storing media files. For PDF downloads and images it would be great if those would appear to be hosted on the website’s domain or on a subdomain, due to trust and SEO reasons. Here is an example: website2021-live-e3e78fbbd3cc41f2847799-7c49c59.divio-media.com should become media.yourdomain.com if your website runs on yourdomain.com. The following article describes how to achieve that.

There is some official documentation available at https://docs.divio.com/en/latest/how-to/configure-media-custom-domain/ – follow those steps.

You have to create a separate Divio project for the reverse proxy. You can fork or copy the below sample project and then add it to your Divio project as external repository: https://github.com/what-digital/divio-media-reverse-proxy

You can get the Divio DSN for the S3 storage by logging into your website project via SSH and then execute echo $DEFAULT_STORAGE_DSN , then take that value to update the nginx configs in /nginx.

Then you can deploy the solution to see if it works. Don’t forget to set the DEFAULT_STORAGE_DSN env variable in the divio control for your main project.

The problem: Cloud hosting services such as Divio.com terminate HTTPS already at the loadbalancer level. Your container that hosts react will never receive an incoming HTTPS connection. Still, upgrading HTTP connections to HTTPS connections falls in the responsibility of your container. How to fix that?

Special thanks to Jonathan for his advice and support.

Here is how to build and serve a React app with nginx on divio.com:

Add an nginx/default.conf to your project:

## Redirect HTTP to HTTPS

server {
    # divio sends all traffic to port 80 as HTTPS is terminated already at the load balancer
    listen 80;

    client_max_body_size 20M;

    if ($http_x_forwarded_proto != 'https') {
        return 301 https://$host$request_uri;
    }

    location / {
      alias /usr/share/nginx/html/;
      try_files $uri $uri/ /index.html =404;
    }

}

change your Dockerfile accordingly:

FROM node:12.16.1 as builder

# for caching optimisations
COPY package*.json /
RUN npm install


COPY . /app
WORKDIR /app

ENV PATH=/node_modules/.bin:$PATH

RUN npm run build


FROM nginx:latest
COPY --from=builder /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/default.conf /etc/nginx/conf.d

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Update your docker-compose.yml for local support and testing (optional):

# This docker-compose.yml file is used to set up your project in the local
# development environment *only*. It is *not* used in deployment to our cloud
# servers, and has no effect whatsoever in cloud deployments.
#
# See our Developer Handbook for more information:
# http://docs.divio.com/en/latest/reference/docker-docker-compose.html
version: "2.3"

services:
  # The web container is an instance of exactly the same Docker image as your
  # Cloud application container.
  web:
    build:
      context: .
      target: builder
    # Change the port if you'd like to expose your project locally on a
    # different port, for example if you already use port 8000 for
    # something else.
    ports:
     - "8000:80"
    volumes:
      - ".:/app:rw"
    # There is currently a bug: https://github.com/facebook/create-react-app/issues/8688#issuecomment-602149917
    tty: true
    # The default command that the container starts with. If you'd like to run
    # the project locally in Live configuration, you will need to change this.
    # See https://docs.divio.com/en/latest/how-to/local-in-live-mode
    command: npm start

  nginx:
    build: .
    # Change the port if you'd like to expose your project locally on a
    # different port, for example if you already use port 8000 for
    # something else.
    ports:
     - "8000:80"
    volumes:
      - "./nginx/default.conf:/etc/nginx/conf.d/default.conf"
    command: [nginx-debug, '-g', 'daemon off;']

There are a few things to know when handling videos in Content Management Systems (CMS). Are you set to become a pro CMS editor? Then please read on:

Video Hosting

You might not be aware, but CMS are not a great place to host video. CMS run on web hosting, which is in most cases not suitable for hosting of large files. Also consider that the video file (for example an .mp4 video format) that you have locally on your desktop might not be optimized for the web.

On the other hand, video platforms such as youtube or vimeo have specialized in video hosting. Videos uploaded on video platforms are auto-magically compressed and optimized for the web, for the maximum compatibility! Doesn’t that sound like the right choice for hosting videos!

Good to know: Platforms such as youtube allow you to host videos for your website without showing them anywhere else, for example your youtube channel. This special mode is called an “unlisted” video.

Now how do we get Youtube play nicely together with your CMS? You have probably already seen that the video component in your CMS allows to insert a Youtube link. Let’s go get that link on youtube!

Step 1: Create an “unlisted” video on Youtube

Go to https://studio.youtube.com/ – if you don’t have a Google Account, maybe now is a good time to set up a shared gmail address for your department or team. Make sure you select the right channel or create a new one. Since it won’t be public anyway, you dont need to upload a logo or care about any optional fields. Then at some point you can upload your video:

Step 2: Edit the page in the CMS where you would like to add the video, add a video component

This is how it looks in django CMS:

Once you save, you can now see your video nicely embedded on your page!

Pro Tipp for Youtube

Did you notice the small video thumbnails that youtube puts at the end of your video to keep the user engaged? This is often not desirable. You can limit those previews to show only other (public) videos from your channel. In django CMS’ video component this behaviour can be configured with the Parameters field right below the video URL field. Just hit the + button and set a parameter rel to the value 0. In other systems you can try appending &rel=0 to the video URL. Try this example: https://www.youtube.com/watch?v=1nOo2lrPXSo&rel=0

There are a few things to know when handling images in Content Management Systems (CMS). Are you set to become a pro CMS editor? Then please read on:

Image size

We get it – you would like to have high quality images / photos everywhere on your website! We do, too! However bigger is not always better. It’s also important to optimize for page speed (see here why pagespeed matters). This means that the file size of our pictures should be as small as possible, while, of course, keeping the image quality on a satisfactory level.

Here is how!

Compress your Image

Some CMS compress images automatically when you upload it – but often the built-in image compression is not what it could be. On top of that, many CMS will keep the original image anyway “for the record”, using up unnecessary disk space.

It’s therefore recommendable to first upload your images to a tool such as https://www.iloveimg.com/compress-image – Here you can safely assume that your images are compressed to the max!

Resize your image

Once you compressed your images, you can make your image even smaller by clicking the resize button right where you are!

These days, images are best resized to either width or height at or below 4,000px (the most recent TV screens are called Ultra HD and have a 4K image resolution (3,840 x 2,160 pixels) and the most recent Macbook Air (3rd gen) has a screen resolution of  2,560 x 1,600 pixel.

If you know that your image won’t cover the full screen, you can resize it to something even smaller, for example max 500px (either width or height).

Image naming

Now you have a perfectly optimized image! Even though some CMS allow you to change the file name later on, the original file name will still be stored and will linger around! It is therefore recommended to give the image a speaking file name before you upload it to the CMS.

Good Example ✅: woman-in-green-dress-pointing-at-screen.jpg

• Try to avoid spaces, use hyphens (the minus character) instead
• try to describe what’s on the picture, not what you use the picture for (bad example: ❌ product-page-first-section.jpg)
• put your image in a folder so it’s easier for you to find it later. Example folder name: Blog Post Header Images

Now you are ready to upload your picture into the CMS! 👏 Well done! 👍

By the way: Responsive Images

Some images are treated in a “smart” way by the CMS, meaning that the CMS adapts the width of the image according to the window width, and keeps the height of the image at an acceptable value according to the device or window width. Sounds like magic? It is!

Please read on about responsive images here: https://blog.typodrive.com/2019/03/09/responsive-images-and-safe-areas/