Category: Uncategorized

Great Handovers between Designer and Developers

Traditionally, in any kind of publishing business there has always been a big gap between designers and implementation. We come from a world, where after the designers were done, whoever needed to implement designs had to spend a lot of work importing the artwork into his work environment.

In modern web development, for the first time in the history of mankind, smooth, integrated handovers between designers and developers are in our reach! Here is how.

The challenge

For website projects, the handover between the design phase and the development phase can be difficult and time consuming. Here are a couple of reasons why:

  • Some designs look smaller when looking at them as mockups than after they are implemented as websites. This is then a big surprise for customers.
  • Not all the assets are available in the quality required (vector shapes, high-res images, webfonts, etc.)
  • Developers cant work with source file formats that are not intended for web design (such as Adobe Indesign)
  • The design doesnt use a standard grid and therefore requires significant additional effort for implementation
  • Some frontend developers use Linux and therefore cannot open Sketch files because Sketch is not supported on Linux

Therefore we created some guidelines for designers:

1. Design Mockup Sizes

Have you ever read “Objects In The Mirror Are Closer Than They Appear” on a side-view mirror? The same happens to mockups. They often look smaller than they will appear once implemented in code. Also, designers often work with very big screens 19 or 22 inches, while clients often use their business laptops at 13 or 15 inches.

Recommendations:

  • Use 1920px for the artboard width itself and 1040px for the content width for desktops.
    • This setup allows a frontend developer to see what elements should stretch out to full screen width, and what elements are limited by the content width.
    • The 1040px content width will allow the client to preview the design in its full width even on smaller screens and in general is aesthetically pleasing.
  • Show the mockups to the client in a way that is not zoomable. Use a design hand-off tool (see below) – why? It doesn’t auto-scale the mockups based on the window width of the browser. If you use images or PDF, the content of the window is auto-scaled based on the window width of the browser or image preview tool on the client’s computer. Alternative: Send the client an HTML where the mockups are added as background image of the body element (<html><body style="background-image: url('img/mockup1.jpg'); height: 3500px; background-repeat: no-repeat; background-position: center top;"></body></html>)

2. Smooth Design Handovers

The topic of design handovers today is nearly fully covered by using Design Hand-Off Tools – see here for an intro: Design Hand-Off Tools

Best Case: Use a Design Hand-Off Tool!

How does paradise look like for a frontend developer?

The best case for frontend developers is when the design comes in a Design Hand-Off Tool. Like this, the frontend developer can extract all the required assets directly in the tool and use them to build the real high-resolution website. Awesome!

There are currently three options:

Note:

  • vector shapes (such as icons), images and text should be selectable separately so that it can be exported for production.
  • For text: text properties (such as text size, text decoration, text style, font-family, etc.) should be properly displayed in the tool, when selecting the text.
  • For layouts it’s important that properties such as border radius, shadows, height, width, etc. is properly displayed in the tool, when selecting a box or other type of layout.
  • If the design has almost-unnoticeable gradients (eg for visibility of the text on top of bright images) – mention them explicitly during the hand-over, otherwise they might go unnoticed and end up being excluded from the estimates.

Second Option: Use a web design tool

If it is not possible to use a Design Hand-Off Tool, it’s still possible to do an efficient handover to the frontend developer. In this case please make sure that all assets can be exported separately and are available in high-resolution. Please check if the responsible frontend developer has access to the web design tool (i.e. Sketch is not available for Linux) and in case there is a problem please provide the assets separately (see below).

Here are the main options on the market (some of them are Mac OS only!):

Fallback Option: Use a conventional graphic design tool

Handing over design in a conventional graphic design tool will mean significant additional efforts for frontend developers, as the asset extraction takes more time. (TODO: add some more reasons why)

In this case please make sure that all assets can be exported separately and are available in high-resolution. Please check if the responsible frontend developer has access to the web design tool (i.e. Sketch is not available for Linux) and in case there is a problem please provide the assets separately (see below).

Such tools are:

  • Adobe Illustrator
  • …

Deprecated tools that shouldn’t be used anymore for web design handover and which we dont support anymore:

  • Adobe Photoshop
  • Adobe Indesign
  • …

In this case please see below for a traditional hand-off as separate files.

Handing off assets as separate files

In order to maintain full compatibility with the frontend developer’s technical means, designers might need to hand off assets as separate files on Google Drive.

Assets like vector shapes, images, stock photos, videos and web fonts

Please provide all the assets separately on Google Drive (see below), so that the Frontend Developer can use these files to build the website. Use speaking file names whenever possible to facilitate the frontend developer’s work.

  • images in high-resolution (.png / .jpg)
  • web fonts (.woff / .woff2 )
  • vector shapes (.svg)

Fonts

Assets that need to be purchased

  • Normally, the client is purchasing any paid assets directly via credit card.
  • While working on a design proposal that includes assets that need to be purchased, you can use preview or trial material, other sources (i.e. fonts you have already installed, etc.) for the mockups.
  • Upon design approval you can create a gitlab issue on the respective Gitlab project, asking the client to purchase the corresponding assets. Please include the direct links to the items to be purchased for the convenience of the client. Many thanks.

Uploading your source files (.xd, .sketch, …) and any other assets to Google Drive

  • In order to enable frontend developers to work efficiently, it’s important that all your source files are in the project’s Google Drive folder and that you keep them updated at all times so that the frontend developer always have access to the latest version.
  • If you dont have access to the project’s shared folder on Google Drive request access with the responsible project manager
  • Do not change the file name after updating a source file (i.e. do not add a version string or date to the filename). Google Drive automatically creates a new version of the file if the file name is the same. The old versions are still accessible via the context menu (right click on the file).

Create a Google Account on your existing non-gmail email address

Yes, it’s possible!

Some context: A Google Account and a gmail address are not the same thing. A Google Account is required to log into Google services such as gmail, google drive, youtube, etc. Login with Google even lets you use your Google Account (instead of a username and password) to log into third-party services that support it.

Note: When you create a gmail address a Google Account is automagically created with it.

Google lets you create a Google Account for any email address, specifically for your work address.

Why does it matter?

Other people might want to add you to Google services. If you don’t have a Google Account on your work address, these people will see this error, here is an example from Google Analytics:

It’s recommended to use your official work address for Google (and other) services you use for work, instead of your private (or secondary) gmail address. This way, system administrators can identify individuals when looking at a list of authorized users which increases security for everybody at your company. Nobody knows who frank_82@gmail.com is, but everybody can recognize frank.mueller@yourcompany.com.

How? Here is how to create a Google Account with your non-gmail email address:

  1. Go to https://accounts.google.com/signup/
  2. Click on Use my current email address instead
  3. Enter your official work email address
  4. Finalize the registration providing the required information

If Google complains that there is already a Google Account for this email address, then please click on Sign in instead and sign in, use the Forgot password? link to recover your password if necessary.

Now your work email address (respectively the Google Account attached to it) can be used by other people to add you to Google Services, for example Google Analytics.

Django and Security

Many people have asked me: Is django secure?

Luckily, with django we don’t have to worry about basic security at all. Here is a list of basic security stuff that django supports right out of the box.

  • Cross site scripting (XSS) protection
  • Cross site request forgery (CSRF) protection
  • Full CORS support
  • SQL injection protection
  • Clickjacking protection
  • SSL/HTTPS
  • Host header validation
  • Session security

On top of this we lock down production deployments as follows:

  • Set SECURE_HSTS_SECONDS. If your entire site is served only over SSL, you may want to consider setting a value and enabling HTTP Strict Transport Security. Be sure to read the documentation first; enabling HSTS carelessly can cause serious, irreversible problems.
  • SECURE_CONTENT_TYPE_NOSNIFF set to True, so your pages will not be served with an ‘x-content-type-options: nosniff’ header. You should consider enabling this header to prevent the browser from identifying content types incorrectly.
  • SECURE_BROWSER_XSS_FILTER set to True, so your pages will not be served with an ‘x-xss-protection: 1; mode=block’ header. You should consider enabling this header to activate the browser’s XSS filtering and help prevent XSS attacks.
  • SECURE_SSL_REDIRECT set to True. Unless your site should be available over both SSL and non-SSL connections, you may want to either set this setting True or configure a load balancer or reverse-proxy server to redirect all connections to HTTPS.
  • SESSION_COOKIE_SECURE set to True. Using a secure-only session cookie makes it more difficult for network traffic sniffers to hijack user sessions.
  • Set CSRF_COOKIE_SECURE to True. Using a secure-only CSRF cookie makes it more difficult for network traffic sniffers to steal the CSRF token.
  • DEBUG set to False in deployment.
  • X_FRAME_OPTIONS set to ‘DENY’. The default is ‘SAMEORIGIN’, but unless there is a good reason for your site to serve other parts of itself in a frame, you should change it to ‘DENY’.

Additional Security Features

django features a range of third-party open source modules that improve security, for example access logging and application firewalling: https://djangopackages.org/grids/g/security/

The life and death of conventional Content Management Systems – and why django CMS is more sustainable

I was recently asked to compare the django ecosystem with the drupal ecosystem. Drupal is widely known as a huge open source CMS success with a massive community behind. 

However looking at Google Trend to my biggest surprise I realized that this is not true in 2019 anymore. The django ecosystem is bigger and on top of that, growing in a sustainable way.

Django (red) vs Drupal (blue) – Since 2016 django has surpassed Drupal. Shockingly, the decline in the interest in the Drupal CMS ecosystem is sharp.

Google Trends 2019

It is my experience that most CMS come and go across the years. The django ecosystem appears to be much more robust than any CMS ecosystem because it doesnt just cover CMS functionality, as a web application framework it covers a much broader scope, with the django CMS package covering the CMS part.

As you can see here, Django is amongst the top three open source web technology ecosystems and it is on a continuous growth path:

Google Trends 2019

django CMS itself is much leaner than other CMS, as it sits on the shoulder of a giant: django – this makes it more long-living and much more maintainable than other CMS projects.

I hope I could give you some insights into the advantages of django + django CMS. Please let me know if you have any questions.

For more information about the technology stack, I’d also point you to the slightly technical articles I wrote about django and django cms.

Disclaimer: At what.digital django and django CMS is our main backend technology stack.

Would you like to contribute to this article? Please let me know. For example, do you think Google Trends is a good way to look at how future-proof a technology is?

Why we use divio.com for django / django CMS hosting

Divio is the company that originally founded django CMS a couple of years ago and that still contributes to developing it further together with the rest of the django CMS community.

Divio is a professional, modern cloud hosting company specialized in hosting python / django / django CMS projects in a highly secure, performant and efficient way.

Divio relies on data centers in Europa and North America via Amazon Web Services (AWS) and in Switzerland – its hosting is fully scalable, meaning that we could host websites with Divio that would be used by hundreds of thousands of daily users.

Amongst Divio’s customers are small to large enterprises in Switzerland and across the globe including S&P Fortune 500 companies and global financial institutions.

Divio is headquartered in Zurich, close to Hardbrücke and has offices in New York City and Stockholm as well as a technical team distributed around the world to be able to respond to support requests around the clock (24/7).

At what.digital what we like about divio.com hosting is:

  • simplicity of the divio.com control panel to launch and maintain projects for our clients
  • very competitive pricing
  • simple backup
  • quick responses from their support staff
  • robust developer tools for django and django CMS projects

Why Django – the Web Application Framework for perfectionists with deadlines

Django is a modern web application (backend) framework with lots of support to scaffold web applications.

Django was designed to help developers take applications from concept to completion as quickly as possible.

https://www.djangoproject.com/

The main advantages are:

  • Secure: Django has built-in state-of-the-art security.
  • Efficient: Django has some of the best scaffolding tools to build web applications fast and efficiently (ORM including fully automated database migrations, admin interface, form generation, user authentication, management and permissions, REST API support, and much more). This means that applications can be developed quicker and more cost-efficiently, and the maintenance cost is lower in comparison with other web frameworks.
  • Popular: Django is very popular and has a huge community. Looking at Google Trends, Django emerges as a top-three web framework next to Spring and Laravel. Being so popular, Django has tons of well-maintained modules. These modules are well organized – check it out at https://djangopackages.org/.

By the way: Django also has very good Content Management (CMS) support via projects like Django CMS or wagtail.

Django CMS – A hands-on Introduction

Introduction

Why Django CMS? Django CMS is a good choice for companies that depend on their website to drive business and generate user value.

For Editors and Marketing Managers: Django CMS empowers editors to select from custom-made page templates and content elements without any dependency on developers. Watch the video below:

django CMS is user friendly and has a very intuitive drag and drop interface.
It’s built around the needs of multi-lingual publishing by default, not as an afterthought: all websites, pages and content can exist in multiple language versions

https://www.django-cms.org/en/

Full list of django CMS features:

  • Frontend Editing
  • Modular Content Management. Editors can choose from…
    • content elements (plugins)
    • templates for a whole page
    • templates for just parts of a page (sections)
  • Full Multi-Language Support
  • Simple publishing process (draft / published)
  • Multi-Site Support (manage different sites with different domains in the same project)
  • Support for all aspects of SEO and Social Media cards / integrations
  • Full-fledged admin interface and site settings
  • different levels of permissions for editors
  • Full-text search
  • Undo / Redo / Revert to published version for editors
  • … and more

For Developers: Developers can use the full power of Django, a top-three open-source web framework which is also at the core of Django CMS, to build state-of-the-art applications (such as an online course booking tool) that integrate smoothly with the rest of the website. Moreover, developers can include CMS functionality in their applications, creating a perfect blend between application logic and manageable content.

Demo

Here you can create your own demo web server with Django CMS and a demo theme installed out of the box. No setup required.

The demo theme consists of standard components. It allows you to build your own page templates. Components include image sliders, text and images in one or multiple columns, tabbed content and much more.

First Steps: In Django CMS, all content can be edited right on the website itself. Append ?edit to the current URL and hit enter. Now you should see the admin bar where you can log in with the admin username and password that you received (or if already logged in, just hit the ‘Edit’ button). Then try double-clicking on a text anywhere on the page and an editor window will open.

The Structure Mode

The structure mode allows an editor to insert content elements (a.k.a. plugins) and to change their order on the page. Try it out! Here is how to use the DjangoCMS structure mode.

More Admin Tools

There are some additional admin tools that allow you to publish / unpublish pages, manage multi-language, etc: Read more at http://docs.django-cms.org/en/latest/user/reference/page_admin.html

Here is the link to the full documentation for editors: http://docs.django-cms.org/en/latest/user/index.html

What’s next?

If you have any questions about Django, Django CMS or CMS in general please get in touch with mario@what.digital

Firebase Dynamic Links and Marketing Campaign Attribution

The goal: What the app marketer would like to do: Prepare links with Google Analytics utm parameters that lead the user to the app (either via download & install through the app store or directly to the installed app) and then use these links in online marketing campaign across the board (email marketing, social media marketing, search engine marketing, display advertising, etc.)

The Solution (experimental): Firebase Dynamic Links

Here is how you can create such a Firebase Dynamic Link manually and here is the debug view of an example of a Firebase Dynamic Link: https://example.page.link/?link=https://www.our-client.com&d=1&utm_source=google&utm_medium=cpc&utm_campaign=summer-campaign

According to the official documentation, these links will work on both iOS and Android, whether the app is installed or not. Google Analytics utm_parameters appear to be fully supported.

Dynamic Links work across app installs: if a user opens a Dynamic Link on iOS or Android and doesn’t have your app installed, the user can be prompted to install it; then, after installation, your app starts and can access the link.

…

When a user opens one of your Dynamic Links, if your app isn’t yet installed, the user is sent to the Play Store or App Store to install your app (unless you specify otherwise), and your app opens. You can then retrieve the link that was passed to your app and handle the deep link as appropriate for your app.

https://firebase.google.com/docs/dynamic-links
This is an example of what a Firebase Dynamic Link is capable of doing in different situations.

Laravel vs Django Web Framework

There are some comparisons out there on the web, but they appear to be shallow. Most of them just cover performance (Django wins), security (Django wins), learning curve (Django wins) and API (django loses, even though there is excellent API support in the form of a well maintained package called Django Rest Framework).

Let’s try to find out the real differences by looking at the different steps needed to build a simple blog application.

Disclaimer: I know Django quite well and Laravel not at all. Which means I am biased. Please collaborate via mario@what.digital to improve the Laravel part of the comparison.

Ecosystem

Django provides a huge community and a very strong open source code base. It is probably safe to say that the underlying programming language Python has everything. There are many Python libraries that are well tested and ready for production.

Pypi is a very strong package manager with very good conflict management and dependency resolving. It is straightforward to use a virtual environment to create local, customized environments for different projects (similar to NPM and node modules) but in a less crazy way.

Django itself has a huge package directory with very useful comparison pages like https://djangopackages.org/grids/g/cms/ – it is simple to see which packages should be chosen for a specific job.

IDEs are readily available for example Pycharm including break point debugging and full inspection out of the box. Django has its own development server that runs as a CLI command out of the box. It’s also hasslefree to dockerize a local dev env (including debugging!)

Laravel has a huge community and a pretty strong open source code base. The underlying programming language goes back to Adam and Eva. There are many libraries. Dependencies are handled in composer. Finding a package appears to be a bit of a hassle as https://packagist.org/ doesn’t have browsable categories or comparison grids.

IDEs are readily available including breakpoint debugging for example PhpStorm. For debugging Xdebug needs to be installed and configured and the official PhpStorm docs even mention installing a browser extension. This appears to be quite a hassle. For dockerizing a local dev env, there appears to be a working cookbook.

Laravel can be run in development mode locally via CLI command php artisan serve out of the box.

Models

Django lets you define a model with different fields. Then it provides a CLI command to create migrations automatically. ./manage migrate will then apply the new model or any subsequent changes to the database. Upon changing the model, i.e. altering the properties of a model field, Django will detect this change and generate a corresponding migration.

Laravel allows you to create a migration file but its empty. You have to fill it with things you want to migrate yourself. Laravel does not support creating database migrations from the modal automatically. This means that your model code lives in two places (1. migrations, 2. model) and they have to be kept in sync manually.

ORM

Django ORM is taking care of all SQL things for the programmer. Query building is chainable like Animal.models.filter(color='black').filter(legs=4).filter(owner__email="mario@what.digital").distinct(). Its Q class allows to build sophisticated encapsulated queries without touching SQL. Also note the ease with which the query can span foreign relations (owner__email points to the email field of the foreign relation of the owner field, for example a User model)

Laravel has a sophisticated ORM which allows custom queries and managers.

TBD: I was not able to quickly find a simple straightforward solution on how to filter via a foreign key relation’s property like in Django.

Admin Interface

An often overlooked feature, Django provides an admin interface out of the box. It has support for translation via 3rd party apps.

It requires zero configuration as it inspects the model definitions. It supports CRUD permissions out of the box per model and has mobile optimized widgets for all fields, including dates, searchable many-to-many relations, searchable auto completion for foreign keys. The django admin package is built on top of Django’s templating system, so its look and feel is extendable, allowing for example DjangoCMS to build its entire customly styled admin interface on top of it, without changing core functionality. Django Admin is configured by extending the package’s classes with properties such as list_display = ('first_name', 'last_name') in the module’s admin.py file, by default, no files are generated into your project.

Laravel has Laravel Nova as the official admin panel, it looks great. It has support for translation via 3rd party apps.

There are also some 3rd party admin packages that offer a lot of functionality, for example https://backpackforlaravel.com/. For example, it is nice to have an image upload widget that allows cropping.

Generally, in Laravel such packages require generating scaffolding code which then lives in your project. Changing admin behaviour requires the programmer to write PHP code, inside the scaffolded code.

Templating

Django has its own template language or Jinja2 can be used, both are hierarchical and use the extension strategy. Both are pretty mutch self explanatory. Some programmers dont like the django template language because it is limited (it only supports custom template tags and filters). But in my experience Django Template’s support for include together with with (context) solves it all. Jinja2 has support for components (called macros) and is said to be more powerful, so feel free to switch to jinja2 via some simple configuration in settings.py.

Laravel uses hierarchical Blade templates with the extension strategy. Blade has components which allows to quickly create custom blocks.

Frontend Support

Django has no special tools to handle CSS / SASS or JS / TS. In my opinion, that’s a plus, because it forces programmers to use state of the art frontend tools like webpack and keep backend and frontend strictly separated.

Laravel has Laravel Mix which appears to be a laravel-flavoured frontend setup. It’s probably not suitable for professional use (correct me if I am wrong). It doesnt appear to support any built-in chunking though. Vuejs has its own tooling and it’s probably simpler to just use the plain vanilla react or vuejs setup strictly separated from laravel.

Static Files Support

Django has first-class support for static files and media files. Django’s collectstatic command allows to keep static files inside static/ folders within the single modules and apps (possibly inside 3rd party modules) and still be able to serve them from one single static file directory (or S3 bucket). That’s very smart because 3rd party modules dont have to be part of the code base of the project and can still contribute their static files in a fully automated way.

Django does have one more trick up its sleeve: ManifestStaticFilesStorage is a storage driver that automatically hashes all static files. This means, that it is very easy to have webpack build the app.js (and app.css bundle, or also multiple bundles) without hashes and then have them hashed by ManifestStaticFilesStorage so you can have a perfect caching solution with far-future headers enabled on the web server for the static file directory, including all server-rendered images.

From what I see there are no special tools for handling static files in Laravel.

i18n and localisation support

Django has extreme localisation and i18n support out of the box. django admin offers a translation interface for models right out of the box with well tested and widely compatible django-parler support. Also it has number formatting localisation support.

Django has its own wrapper around gettext / .po files (CLI commands makemessages and compilemessages. It allows to translate strings anywhere in Python code or in templates.

Laravel has simple i18n support and no gettext / .po support out of the box. I suspect that i18n might not be very performant.

Laravel has to fall back to third party tools like https://carbon.nesbot.com/ for format localisation. Are there disadvantages? For example how is a date formatted in a template? Does this require additional code in the template?

TBD: How can a model be translated in a laravel admin out of the box?

Documentation

Django documentation and tutorials are huge. It allows to quickly get going, even for a complete beginner. At the same time it has all the details for the pros to quickly look up some detail.

I find Laravel’s documentation a bit on the minimalistic side. It’s hard to get detailled information about specific configuration properties. A lot is left open to the developer. This doesnt incentivize the developer to follow best practise coding approaches and standards. I dare to say that it’s much easier to write bad code in Laravel than it is in Django.

Other Things

Django supports mailing, events and caching quite well.

Laravel supports mailing, events and caching quite well.

Task Queues and Scheduling

Django has asyncronous task support via a 3rd party library (Celery). It’s not so easy to set up and requires some ground work and configuration, especially for deployment and monitoring. Monitoring is mostly done via Flower, but it’s a bit outdated and sometimes a bit useless.

Laravel has built in asyncronous task processing built in via its Queues. This looks like a robust, performant and lean solution. The monitoring solution appears to be awesome: https://laravel.com/docs/5.8/horizon

Authentication and oAuth

Django supports oauth (also in combination with the REST API via Django Rest Framework) quite well.

Laravel has Socialite and Passport and appears to support oauth (also in combination with the REST API) quite well and out of the box. This looks like a robust, performant solution.

Search

Django has good support for quick and easy implementation of a full-text search via django-haystack it can connect to powerful search engines like Solr, Elasticsearch, Whoosh, Xapian but also has a simple database driven backend.

Laravel has Scout which appears to support full-text search quite well, quickly and easily and out of the box. This looks like a performant, robust solution.

Browser Automation / Integration Testing

Django has a very good testing framework out of the box which supports selenium quite well.

Laravel has Laravel Dusk which installs via PHP composer and appears to have a quite lean setup via ChromeDriver. This looks like a performant, robust and easy solution.