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.
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:
- Create Docker digital ocean droplet
- Add SSH-Key to machine
- Clone github repository
- Create A-Record in namecheap (takes 24h)
Flask Ecosystem
- Miguel Grinberg: The Flask Mega-Tutorial
- Flask-Login
- DB
Databases
Front-End Framework
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:
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
- Flask-Mail
- Mailgun, mailchimp ?
- SendGrid (users)
- Mail-Server Docker
tvial/docker-mailserver:latest: Requires 1 GB RAM
Image Upload
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:
Payment
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