• Martin Thoma
  • Home
  • Categories
  • Tags
  • Archives
  • Support me

Make a Webservice

Contents

  • Quick n' Dirty
  • Flask Ecosystem
  • Databases
  • Front-End Framework
  • WYSIWYG Editors
  • Decisions
  • Favicon
  • Small Services
  • E-Mail
  • Image Upload
  • Social Stuff
  • Payment
  • Tests
  • TODO

I started doing web-stuff again! There are a gazillion decisions to take when you create even a medium-sized web service. This article is intended to give a small overview.

This is an article I had for quite a while as a draft. As part of my yearly cleanup, I've published it without finishing it. It might not be finished or have other problems.

Quick n' Dirty

You can set up a first page in about than 10 minutes, if you have a DigitalOcean account and the domain via namecheap:

  1. Create Docker digital ocean droplet
  2. Add SSH-Key to machine
  3. Clone github repository
  4. Create A-Record in namecheap (takes 24h)

Flask Ecosystem

  • Miguel Grinberg: The Flask Mega-Tutorial
  • Flask-Login
  • DB
    • Flask-SQLalchemy
    • Flask-Migrate

Databases

  • MariaDB vs MySQL

Front-End Framework

  • Bootstrap (wiki)
  • Materialize (wiki)
  • Foundation (wiki)
  • Semantic UI

WYSIWYG Editors

I would like to have a WYSIWYG editor. It should support heading types, bold/italic/underine, tables, images, videos from YouTube, file upload and MathJax formulas.

It would be nice if supported storing / rendering directly from Markdown. It that doesn't exist, I might convert the HTML to Markdown and back with Pandoc.

Editor QuillJS Summernote CKEditor 4 Trumbowyg Redactor Medium Froala
Toolbar custom custom custom ? custom ? custom
Bold/Italic/Underline B+I+U B+U B+I B+I B+I B+I+U B+I+U
Headings 3 6 3 4 6 2 4
Tables No Good Ok Bad, via Plugin Ok Good, via plugin Good
Lists ol+ul ol+ul ol+ul ol+ul ol+ul No ol+ul
Links Yes Yes Yes Yes Yes Yes Yes
File Upload No No Yes No Yes No Yes
Images Bad Good Good Bad Basic, nice Bad, via plugin Very Good
Code Yes Bad, also via plugin Good, via Plugin via plugin Bad No Bad
MathJax Bad Good, via plugin Good, via plugin Basic, via plugin No No Questionable, via plugin
(Y)ouTube / (V)imeo No Y+V No No No Bad, via plugin Yes
Output JSON HTML HTML HTML HTML HTML HTML
Community 604 SO 716 SO 8033 SO 38 SO 268 SO 60 SO 344 SO
Dependencies jQuery
License/Price BSD MIT GPLv2, LGPLv2.1 MIT $199 MIT $1199

One should also mention that there are a couple of Markdown editors out there. Usually, you can only write Markdown and see a preview:

  • StackEdit
  • HackMD
  • SimpleMDE

See also:

  • OryEditor: Similar to Medium, but a lot more functionality
  • Trix: Another super basic editor. Looks nice.
  • TinyMCE

Decisions

  • Display name, Username or Handle? (Disqus, Kik, Spotify, Twitch)
  • How Many Characters may a display name have? (e.g. 30 on StackExchange)
  • Where are hard deletes allowed, where only soft deletes?

Favicon

  • Font Awesome (icon search)
  • Feather Icons
  • https://favicon.io/favicon-generator/
  • https://icons8.de/icons
  • gridicons (Wordpress)

Small Services

  • Gravatar

E-Mail

  • Flask-Mail
  • Mailgun, mailchimp ?
  • SendGrid (users)
  • Mail-Server Docker tvial/docker-mailserver:latest: Requires 1 GB RAM

Image Upload

  • Imgur?

Social Stuff

There are two aspects of social service optimization: Making it easy to share stuff from your site and being active on that site. Or at least reachable.

  • Twitter:
    • Is it worth to create an account?
    • Twitter Card
  • Facebook:
    • Open Graph

Payment

  • PayPal?
  • Stripe (users) ?

Tests

  • Google: Pagespeed Insights
  • Google Analytics
  • gtmetrix.com: 98% speed, 93% YSlow, 0.9s, 219kb, 11 Requests
  • thinkwithgoogle.com: Test My Site: 1.6s in einem 4G-Netz
  • IPv6

TODO

  • OpenID: https://developer.okta.com/blog/2017/07/25/oidc-primer-part-1 and https://developer.okta.com/product/, Coding Horror
  • Login design
  • Bootstrap:
    • https://startbootstrap.com/templates/
    • https://getbootstrap.com/docs/4.1/examples/
    • https://getbootstrap.com/docs/4.1/examples/dashboard/
  • Stock Photos:
    • https://www.pexels.com/photo/beach-blue-sky-idyllic-island-373394/
    • https://blog.snappa.com/free-stock-photos/
    • https://pixabay.com/de/
    • https://www.foleon.com/blog/5-sites-for-free-stock-photos
    • https://www.canva.com/photos/free/
    • https://unsplash.com/free-stock-photos
  • Flask-Admin for database management
  • Flask-Assets for asset management
  • Flask-Security for authentication

Published

Dez 31, 2019
by Martin Thoma

Category

The Web

Tags

  • Web Development 14

Contact

  • Martin Thoma - A blog about Code, the Web and Cyberculture
  • E-mail subscription
  • RSS-Feed
  • Privacy/Datenschutzerklärung
  • Impressum
  • Powered by Pelican. Theme: Elegant by Talha Mansoor